페이지에 세로 스크롤바가 있는지 감지 하시겠습니까?

현재 페이지 / 창 (특정 요소가 아님)에 세로 스크롤 막대가 있는지 확인하는 간단한 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;

그러나 이것은 수직 scrollHeight가 볼 수있는 콘텐츠의 높이보다 큰 경우에만 알려줍니다. 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");

나는 이전 답변을 시도했지만 $ ( "body"). height ()가 반드시 전체 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:<"); 
} 

이 질문을 죽음에서 되돌려 보겠습니다.;) Google이 간단한 해결책을 제공하지 않는 데에는 이유가 있습니다. 특수한 경우와 브라우저의 단점이 계산에 영향을 미치며 보이는 것만 큼 사소하지 않습니다.

불행히도 지금까지 여기에 설명 된 솔루션에 문제가 있습니다. 나는 그것들을 전혀 폄하하려는 것이 아닙니다. 그들은 훌륭한 출발점이며보다 강력한 접근 방식에 필요한 모든 주요 속성을 다루고 있습니다. 그러나 다른 답변에서 코드를 복사하여 붙여 넣는 것은 권장하지 않습니다.

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

나는 "그냥 효과가있는"(기침) 해결책을 찾는 데 내가 생각했던 것보다 더 많은 시간을 보냈다. 내가 생각 해낸 알고리즘은 이제 메소드 를 노출 하는 .hasScrollbarjQuery.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().

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

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

window.innerWidth - document.body.clientWidth스크롤바의 너비를 알려줍니다. 이것은 IE9 +에서 작동합니다 (더 적은 브라우저에서는 테스트되지 않음). (또는 질문에 엄격하게 대답하려면!!(window.innerWidth - document.body.clientWidth)

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

바닐라 솔루션을 찾았습니다

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)
}

    <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 경고로 표시되는 디버깅에 도움이 될 수있는 몇 가지 정보를 포함했습니다.

닫는 body 태그 뒤에 스크립트 태그에 넣으십시오.

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)
}

나는 사용한다

public 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";
}

그러나 소품을 변경하여 스크롤바가 사라지는 경우에만 작동합니다. 내용이 창보다 작거나 같으면 작동하지 않습니다.