요소에 스크롤 막대가 있는지 확인하는 가장 빠른 방법은 무엇인가요?
물론 한 가지 방법은 요소가 뷰포트보다 큰지 확인하는 것인데, 이 두 값을 확인하면 쉽게 확인할 수 있습니다:
el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth
하지만 그렇다고 해서 스크롤바가 있다는 의미는 아닙니다(실제로 사람이 스크롤할 수 있습니다).
크로스 브라우저와 1 자바스크립트 전용(jQuery 없음에서와 같이) 방식으로 스크롤바를 확인하려면 어떻게 해야 하나요?
자바 스크립트 전용, 가능한 한 작은 오버 헤드가 필요하고 매우 빠른 jQuery 선택기 필터를 작성하고 싶기 때문입니다.
// check for specific scrollbars
$(":scrollable(x/y/both)")
// check for ANY scrollbar
$(":scrollable")
'오버플로' 스타일 설정을 확인해야 한다고 생각하는데 크로스 브라우저 방식으로 어떻게 해야 하나요?
오버플로스타일 설정뿐만 아니라. 요소에 스크롤바가 있는지 확인하는 것은 생각만큼 사소한 일이 아닙니다. 위에 작성한 첫 번째 공식은 요소에 테두리가 없을 때 잘 작동하지만 테두리가 있는 경우(특히 테두리가 상당한 너비인 경우)
오프셋치수가
스크롤치수보다 클 수 있지만 요소는 여전히 스크롤할 수 있습니다. 실제로 요소의 실제 스크롤 가능한 뷰포트를 얻으려면
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 */
다음은 또 다른 특징은 다음과 같습니다.
이에 따라 차이가 있기 때문에 단순히 몇 명이 프스테이트 비교 및 스테롤하이트 충분치 않다는 지적도 함께 오버플로입니다 숨겨짐, 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으로 설정합니다.
예:
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 (두 번째 이미지)
확인해야 합니다.
동일하게 수직 (오프셋된 / 클리나이트).
IE7 에서 0 의 클리나이트 일부 요소 (내가 왜 점검됩니다 haven& # 39, t), 따라서 할 때는 항상 첫 번째 오버플로입니다 확인란.
이를 통해 희망을!
몇 가지 문제가 있는 경우 그 존재를 확인 중 하나를 스크롤바, 즉, mac 너회가 don& # 39 위, t t scrollbar 그러하매 모두 볼 수 있는 솔루션을 wouldn& 제공하십시오 # 39 정확한 답변이 나왔다.
이 때문에 browser& # 39, s, t # 39 렌더링합니다 isn& 스크롤해야 가진 후 다시 설정뿐입니다 스크롤하고 변화에 매우 자주 확인할 수 있습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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& # 39 에 대해 어느 정도 성공을 com/downloads/global/corporate/iar/esg_prosupport. 함께 비교
var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;
한번 들어봐 아쿠라치 comparison.so 이들보 것으로 보인다. 누가 이 다운로드되었는지 적법한?
// 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
그 안에 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];
}