HTML 요소에 스크롤바가 있는지 확인

요소에 스크롤 막대가 있는지 확인하는 가장 빠른 방법은 무엇입니까?

물론 한 가지는 요소가 뷰포트보다 큰지 확인하는 것입니다. 다음 두 값을 확인하면 쉽게 수행 할 수 있습니다.

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

하지만 그렇다고 스크롤바도 있다는 의미는 아닙니다 (실제로 사람이 스크롤 할 수 있음).

질문

1 크로스 브라우저와 2 자바 스크립트 에서 스크롤바를 확인하는 방법은 ( jQuery 가 아닌 것처럼 ) 어떻게해야합니까?

Javascript 전용, 가능한 한 작은 오버 헤드가 필요하기 때문에 매우 빠른 jQuery 선택기 필터를 작성하고 싶습니다.

// check for specific scrollbars
$(":scrollable(x/y/both)")

// check for ANY scrollbar
$(":scrollable")

overflow스타일 설정 을 확인해야한다고 생각 하지만 크로스 브라우저 방식으로 어떻게 수행합니까?

추가 편집

overflow스타일 설정 뿐만 아니라 . 요소에 스크롤바가 있는지 확인하는 것은 보이는 것만 큼 간단하지 않습니다. 위에서 작성한 첫 번째 수식은 요소에 테두리가 없을 때 잘 작동하지만 테두리가있는 경우 (특히 테두리가 상당한 너비 인 경우) offset차원이 scroll차원 보다 클 수 있지만 요소는 여전히 스크롤 할 수 있습니다. offset요소의 실제 스크롤 가능한 뷰포트를 가져 와서이를 scroll차원 과 비교하려면 실제로 차원에서 테두리를 빼야 합니다.

향후 참조를 위해

:scrollablejQuery 선택기 필터는 내 .scrollintoview()jQuery 플러그인에 포함되어 있습니다. 누군가 필요한 경우 내 블로그 게시물 에서 완전한 코드를 찾을 수 있습니다 . 실제 솔루션을 제공하지는 못했지만 Soumya의 코드는 문제를 해결하는 데 크게 도움이되었습니다. 그것은 나를 올바른 방향으로 가리 켰습니다.

몇 주 전에 어딘가에서 이것을 발견했습니다. 그것은 나를 위해 일했습니다.

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* you'll get true/false */

시험:

수직 스크롤바 용

el.scrollHeight> el.clientHeight

수평 스크롤바 용

el.scrollWidth> el.clientWidth

나는 이것이 IE8과 Firefox 3.6 이상에서 작동한다는 것을 알고 있습니다.

이 보일 수 있습니다 (또는 일) 조금 hackish,하지만 당신은 테스트 할 수 scrollTop및 scrollLeft특성을.

0보다 크면 스크롤바가있는 것입니다. 0이면 1로 설정하고 다시 테스트하여 결과가 1인지 확인한 다음 다시 0으로 설정합니다.

예 : http://jsfiddle.net/MxpR6/1/

function hasScroll(el, direction) {
    direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
    var result = !! el[direction];

    if (!result) {
        el[direction] = 1;
        result = !!el[direction];
        el[direction] = 0;
    }
    return result;
}

alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));

IE에는 다른 속성이 있다고 생각하므로 잠시 후에 업데이트하겠습니다.

편집 : IE가이 속성을 지원할 수있는 것처럼 보입니다. (지금은 IE를 테스트 할 수 없습니다.)

http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx

또 다른 해결책은 다음과 같습니다.

몇몇 사람들이 지적했듯이, offsetHeight와 scrollHeight를 비교하는 것만으로는 여전히 스크롤바가없는 오버 플로우 숨겨진 요소 등이 다르기 때문에 충분하지 않습니다. 그래서 여기에서는 요소의 계산 된 스타일에서 오버플로가 스크롤인지 자동인지 확인합니다.

var isScrollable = function(node) {
  var overflowY = window.getComputedStyle(node)['overflow-y'];
  var overflowX = window.getComputedStyle(node)['overflow-x'];
  return {
    vertical: (overflowY === 'scroll' || overflowY === 'auto') && node.scrollHeight > node.clientHeight,
    horizontal: (overflowX === 'scroll' || overflowX === 'auto') && node.scrollWidth > node.clientWidth,
  };
}

파티에 좀 늦었을지도 모르지만 ...

e.offsetWidth 대 e.clientWidth로 스크롤바를 감지 할 수 있다고 생각합니다. 오프셋 너비에는 테두리 및 스크롤바, 패딩 및 너비가 포함됩니다. 클라이언트 너비에는 패딩과 너비가 포함됩니다. 참조하십시오 :

https://developer.mozilla.org/en/DOM/element.offsetWidth (두 번째 이미지) https://developer.mozilla.org/en/DOM/element.clientWidth (두 번째 이미지)

다음 사항을 확인해야합니다.

1. 요소에 계산 된 / 계단식 / 현재 스타일을 사용하여 자동 / 스크롤 (overflowX / Y 포함)로 설정된 오버플로가 있는지 여부입니다.
2. 요소에 자동 / 스크롤로 설정된 오버플로가있는 경우. offsetWidth 및 clientWidth를 설정하십시오.
3. clientWidth가 offsetWidth-오른쪽 테두리 (계산 / 계단식 / 현재 스타일을 통해 다시 발견됨)보다 작 으면 스크롤 막대가있는 것입니다.

수직 (offset / clientHeight)에 대해서도 동일하게 수행하십시오.

IE7은 일부 요소에 대해 clientHeight를 0으로보고하므로 (이유를 확인하지 않았 음) 항상 첫 번째 오버플로 확인이 필요합니다.

도움이 되었기를 바랍니다!

스크롤바의 존재를 확인하는 경우 몇 가지 문제가 있습니다. 그 중 하나는 Mac에서는 스크롤바가 표시되지 않아 위의 모든 솔루션이 정확한 답을 제공하지 않는다는 것입니다.

따라서 브라우저의 렌더링이 자주 발생하지 않기 때문에 스크롤을 변경하여 스크롤이 있는지 확인한 다음 다시 설정할 수 있습니다.

const hasScrollBar = (element) => {
  const {scrollTop} = element;

  if(scrollTop > 0) {
    return true;
  }

  element.scrollTop += 10;

  if(scrollTop === element.scrollTop) {
    return false;
  }

  // undoing the change
  element.scrollTop = scrollTop;
  return true;
};

위의 솔루션 중 어느 것도 나를 위해 (지금까지) 해결되지 않았기 때문에 여기를 엉망으로 만듭니다. Div의 scrollheight를 offsetHeight와 비교하는 데 성공했습니다.

var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;

지금까지 정확한 비교를 제공하는 것 같습니다. 이것이 합법적인지 누군가 알고 있습니까?

들어 IE11 (인터넷 익스플로러 11) 난에 로직을 변경했다 :

// Subtract 3 (a small arbitrary number) to allow for IE reporting a difference of 1 when no scrollbar is present
var hasVerticalScrollbar = div.scrollHeight - 3 > div.clientHeight;

이것은 IE가 scrollHeight가 스크롤바가 없을 때 clientHeight보다 1 더 크게보고하지만 스크롤바가있을 때 약 9 더 크게보고하기 때문입니다.

당신은 프로그래머 경우에 대한 스크롤 존재 알고 싶다면 전체 웹 페이지 와와를 풀 브라우저 지원 이를 사용할 수 있습니다 :

const hasScrollbar = document.body.scrollHeight > window.innerHeight

window.innerHeight대신 사용 하는 것이 중요합니다 document.body.clientHeight. 일부 모바일 브라우저에서는 clientHeight 가 주소 표시 줄의 크기를 가져 오지 않지만 scrollHeight 가 가져 오므로 잘못된 계산이 발생합니다.

이 답변 중 어느 것도 정확하지 않습니다. 이것을 사용해야합니다 :

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);

그 안에 100 % 너비의 요소를 추가합니다. 그런 다음 오버플로를 숨김으로 설정합니다. 요소의 계산 된 스타일 (jQ에서)이 변경되면 부모에 스크롤바가있는 것입니다.

편집 : getComputedStyle 과 같은 크로스 브라우저 메서드를 원하는 것 같습니다 . 시험:

function getCSS(_elem, _style)
{
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
    else
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
}