페이지에 세로 스크롤 막대가 있는지 검색하시겠습니까?

페이지에 세로 스크롤 막대가 있는지 검색하시겠습니까?

현재 페이지/창(특정 요소가 아님)에 세로 스크롤바가 있는지 확인할 수 있는 간단한 JQ/JS를 원합니다.

구글링은 단지 이 기본적인 기능을 위해 지나치게 복잡해 보이는 것들을 저에게 제공합니다.

이것이 어떻게 행해지는가?

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

사용해 보십시오.

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

세로 스크롤 높이가 표시 가능한 콘텐츠의 높이보다 큰 경우에만 표시됩니다.hasVScroll변수에 true 또는 false가 포함됩니다.

자세한 검사가 필요한 경우 위의 코드에 다음을 추가합니다.

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

저는 이전 답변을 시도했지만 $("본체")를 작동하지 않는 것 같습니다.highth(높이)가 반드시 전체 html 높이를 나타내는 것은 아닙니다.

저는 다음과 같이 해결책을 수정했습니다.

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
} 

이 질문을 죽은 자들로부터 다시 가져오자 ;) 구글이 간단한 해결책을 주지 않는 이유가 있습니다.특별한 경우와 브라우저 특이점이 계산에 영향을 미치며, 보기만큼 사소한 것이 아닙니다.

안타깝게도 지금까지 설명한 솔루션에 문제가 있습니다.저는 그들을 폄하하려는 의도가 전혀 없습니다. 그들은 훌륭한 출발점이며 더 강력한 접근법에 필요한 모든 핵심 속성을 언급합니다.하지만 다른 답변의 코드를 복사하여 붙여넣는 것은 권장하지 않습니다.

• 신뢰할 수 있는 교차 검색 방식으로 배치된 콘텐츠의 효과를 포착하지 못합니다.본문 크기를 기반으로 한 답변은 이를 완전히 놓칩니다(본문 자체가 배치되지 않는 한 본문은 해당 내용의 오프셋 상위 항목이 아닙니다).그리고 그 답변들은 확인합니다.$( document ).width()그리고..height()jQuery의 문서 크기 버그 탐지의 희생양이 됩니다.
• 존의에 window.innerWidth브라우저에서 지원하는 경우 코드가 모바일 브라우저에서 스크롤 막대를 탐지하지 못하게 합니다. 여기서 스크롤 막대의 너비는 일반적으로 0입니다.임시로 오버레이로 표시될 뿐 문서의 공간을 차지하지 않습니다.모바일을 확대하는 것도 그런 식으로 문제가 됩니다(긴 이야기).
• 사람들이 양쪽의 오버플로를 명시적으로 설정할 때 탐지가 해제될 수 있습니다.html그리고.body기본값이 아닌 값에 대한 요소(그 다음에 발생하는 작업은 약간 관련이 있습니다. 이 설명 참조).
• 대부분의 답변에서 바디 패딩, 테두리 또는 여백이 감지되지 않고 결과가 왜곡됩니다.

저는 "그냥 효과가 있는" 해결책을 찾는 데 상상했던 것보다 더 많은 시간을 보냈습니다.제가 생각해낸 알고리즘은 현재 플러그인 jQuery.isInView의 일부로 메서드를 노출합니다.원한다면 출처를 살펴보세요.

페이지를 완전히 제어하고 알 수 없는 CSS를 처리할 필요가 없는 시나리오에서는 플러그인을 사용하는 것이 과도할 수 있습니다. 결국 어떤 에지 케이스가 적용되고 어떤 에지 케이스가 적용되지 않는지 알고 있습니다.그러나 미지의 환경에서 신뢰할 수 있는 결과가 필요하다면 여기에 설명된 솔루션으로는 충분하지 않을 것입니다.당신은 내 것이든 다른 누구든 잘 테스트된 플러그인을 사용하는 것이 더 낫습니다.

이것은 나에게 효과가 있었습니다.

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> window.innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight > 
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}

몸을 위해서, 그냥 사용하세요.hasVerticalScroll().

let hasScrollbar = window.innerWidth > document.documentElement.clientWidth;

이상하게도 이러한 솔루션 중 어떤 것도 페이지에 세로 스크롤 막대가 있는지 알려주지 않습니다.

window.innerWidth - document.body.clientWidth스크롤 막대의 너비를 제공합니다.이 기능은 모든 IE9+에서 작동해야 합니다(하위 브라우저에서는 테스트되지 않음).(또는 질문에 엄격하게 대답하기 위해,!!(window.innerWidth - document.body.clientWidth)

그 이유는? 내용이 창 높이보다 높고 사용자가 위/아래로 스크롤할 수 있는 페이지가 있다고 가정해 보겠습니다.마우스가 연결되지 않은 Mac에서 Chrome을 사용하는 경우 스크롤 막대가 표시되지 않습니다.마우스를 연결하면 스크롤 막대가 나타납니다.(이 동작은 재정의될 수 있지만 기본 AFAIK입니다.)

    <script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

이것은 스크롤바가 있는지 없는지를 알려줍니다.JavaScript 경고로 표시되는 디버깅에 도움이 될 수 있는 몇 가지 정보를 포함했습니다.

본문 태그를 닫는 다음에 스크립트 태그에 넣습니다.

바닐라 용액을 찾았어요

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}

사용합니다

function windowHasScroll()
{
    return document.body.clientHeight > document.documentElement.clientHeight;
}

문서 루트 요소(즉, html 요소)의 너비를 창의 내부 부분과 비교하기만 하면 됩니다.

if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')

스크롤 막대 너비도 알아야 하는 경우:

vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

제 프로젝트 중 하나에서 다른 솔루션이 작동하지 않아서 오버플로 CSS 속성을 확인하게 되었습니다.

function haveScrollbar() {
    var style = window.getComputedStyle(document.body);
    return style["overflow-y"] != "hidden";
}

그러나 내용이 창보다 같거나 작은 경우에는 프롭을 변경하여 스크롤바가 사라질 때만 작동합니다.

저는 Kees C의 업데이트 버전을 작성했습니다.Bakker의 대답:

const hasVerticalScroll = (node) => {
  if (!node) {
    if (window.innerHeight) {
      return document.body.offsetHeight > window.innerHeight
    }
    return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
      || (document.body.scrollHeight > document.body.offsetHeight)
  }
  return node.scrollHeight > node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
  this.props.handleDisableDownScrollerButton()
}

함수는 페이지에 세로 스크롤 막대가 있는지 여부에 따라 true 또는 false를 반환합니다.

예:

const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
  console.log('HAS SCROLL', hasVScroll)
}

언급URL : https://stackoverflow.com/questions/2146874/detect-if-a-page-has-a-vertical-scrollbar