요소에 스크롤 막대가 있는지 확인하는 가장 빠른 방법은 무엇입니까?
물론 한 가지는 요소가 뷰포트보다 큰지 확인하는 것입니다. 다음 두 값을 확인하면 쉽게 수행 할 수 있습니다.
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
차원 과 비교하려면 실제로 차원에서 테두리를 빼야 합니다.
향후 참조를 위해
:scrollable
jQuery 선택기 필터는 내 .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 (두 번째 이미지)
다음 사항을 확인해야합니다.
- 요소에 계산 된 / 계단식 / 현재 스타일을 사용하여 자동 / 스크롤 (overflowX / Y 포함)로 설정된 오버플로가 있는지 여부입니다.
- 요소에 자동 / 스크롤로 설정된 오버플로가있는 경우. offsetWidth 및 clientWidth를 설정하십시오.
- 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;
지금까지 정확한 비교를 제공하는 것 같습니다. 이것이 합법적인지 누군가 알고 있습니까?