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

몇 주 전에 이 곳을 찾았다. 가져다줄래요 통했다.

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 이상에서 작동하는 것으로 알고 있습니다.

다음은 또 다른 특징은 다음과 같습니다.

이에 따라 차이가 있기 때문에 단순히 몇 명이 프스테이트 비교 및 스테롤하이트 충분치 않다는 지적도 함께 오버플로입니다 숨겨짐, etc., 남아 있는 요소에 대한 don& # 39, 스크롤바 없다. # 39 는 여기에서 I& 선택하는 경우, m 에 대한 자동 오버플로입니다 스크롤하거나 계산됩니까 시켜버리므로 요소:

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

약간 해킹처럼 보일 수도 있지만, 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

난 아마 조금 늦게 파티였죠 하지만.

내가 믿겠군 멀티비트 스크롤바 위해 함께 에드클리엔트위트하드 에드프세비데스 vs. 오프셋된 너버 dm_ownerdm_owner 테두리와 스크롤바, 패딩 및 너비입니다. 클라이언트 너버 dm_ownerdm_owner 패딩 및 너비입니다. 참조하십시오.

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

확인해야 합니다.

1. 여부를 요소가 오버플로입니다 자동으로 설정되었습니다 / 스크롤해야 (로베르 프로스 대비 등) 을 사용하여 계산됩니까 / 계층화할 / 현재 스타일.
2. 요소점과 경우 자동으로 설정되었습니다 / 스크롤하십시오 오버플로입니다 가지고 있다. 프세비데스 및 클리엔트위데스 했다.
3. 만약 클리엔트위데스 작습니다 프세비데스 - 오른쪽 테두리 (com/downloads/global/corporate/iar/esg_prosupport. 통해 다시 계산됩니까 / 계층화할 / 현재 스타일), 그럼 scrollbar 알고 있습니다.

동일하게 수직 (오프셋된 / 클리나이트).

IE7 에서 0 의 클리나이트 일부 요소 (내가 왜 점검됩니다 haven& # 39, t), 따라서 할 때는 항상 첫 번째 오버플로입니다 확인란.

이를 통해 희망을!

몇 가지 문제가 있는 경우 그 존재를 확인 중 하나를 스크롤바, 즉, mac 너회가 don& # 39 위, t t scrollbar 그러하매 모두 볼 수 있는 솔루션을 wouldn& 제공하십시오 # 39 정확한 답변이 나왔다.

이 때문에 browser& # 39, s, t # 39 렌더링합니다 isn& 스크롤해야 가진 후 다시 설정뿐입니다 스크롤하고 변화에 매우 자주 확인할 수 있습니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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

끝 - &lt 스니핏 >;!

그냥 메싱 수립하였습니다 다음과 같은 기타 솔루션 협력했습니다 아웃해야 가져다줄래요 (지금까지). 나는 그 프스테이트 스테롤하이트 Div& # 39 에 대해 어느 정도 성공을 com/downloads/global/corporate/iar/esg_prosupport. 함께 비교

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

한번 들어봐 아쿠라치 comparison.so 이들보 것으로 보인다. 누가 이 다운로드되었는지 적법한?

• 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 가 없을 때 더 큰 것으로 보고 있어도 1 보다 큰 스테롤하이트 클리나이트 scrollbar scrollbar 이 때 약 9

이 중 어느 것도 그 대답이 정확하다. you have to use this:

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