[javascript] 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 */

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'));

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,
  };
}

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

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