如何找出导致滚动条的元素
How to find out which element is causing a scrollbar
我有一个关于调试的问题。我想问你,我怎么能找出整个标记的哪个元素导致滚动条。任何一种方法都可以。我想过在开发人员工具中搜索overflow
,但这并没有真正帮助我。
有谁知道我该如何解决这个问题?
您需要检查一些事项。首先,一个元素有一个溢出,会产生一个滚动条:overflow: scroll
强制它们,overflow: auto
在必要时显示它们。如果溢出是自动的,则可以根据实际高度检查其滚动高度。
function isScroller(el) {
var isScrollableWidth, isScollableHeight, elStyle;
elStyle = window.getComputedStyle(el, null); // Note: IE9+
if (elStyle.overflow === 'scroll' ||
elStyle.overflowX === 'scroll' ||
elStyle.overflowY === 'scroll') {
return true;
}
if (elStyle.overflow === 'auto' ||
elStyle.overflowX === 'auto' ||
elStyle.overflowY === 'auto') {
if (el.scrollHeight > el.clientHeight) {
return true;
}
if (el.scrollWidth > el.clientWidth) {
return true;
}
}
return false;
}
var els = document.querySelectorAll('body *');
for (var i = 0, el; el = els[i]; i++) {
if (isScroller(el)) {
console.log(el);
}
}
您可以在此处看到它(打开控制台): http://jsfiddle.net/rgthree/zfyhby1j/
请注意,某些触摸设备可能不会产生实际的"滚动条",除非在滚动时。这不会检测到这一点,而是检测到元素能够滚动。
相关文章:
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 滚动所有嵌套的滚动条,使HTML元素进入视图
- 隐藏元素后更新滚动条
- 通过 ajax 使用自定义滚动条向元素添加内容
- 滚动窗口内的一个元素,该窗口具有滚动条
- 如何“;“修复”;显示滚动条时的容器元素高度
- 将DIV元素绑定到溢出滚动条
- 删除垂直滚动条而不附加元素换行
- 滚动条获胜't在所选元素不可见时滚动
- 当任何块级元素的视口较窄时,添加水平滚动条
- 将画布元素的高度和宽度设置为 window.innerHeight/innerWidth 导致滚动条
- (IE9)删除浮动或绝对定位的元素将导致同级元素的滚动条滚动回顶部
- 滚动 DIV 元素的特定滚动条
- 溢出:删除元素时,带有子 TABLE 滚动条的 DIV 上的自动滚动条会保留
- 如何找出导致滚动条的元素
- Webkit 在使元素可见后不呈现自定义滚动条
- 破解以在滚动条出现时保持水平元素位置
- jQuery scrollTop 不适用于具有高度和滚动条的 HTML 元素
- 基于活动元素自动滑动滚动条
- Jquery滚动条隐藏菜单中的元素