如何找出导致滚动条的元素答案

【问题标题】：How to find out which element is causing a scrollbar如何找出导致滚动条的元素
【发布时间】：2015-03-05 12:39:43
【问题描述】：

我有一个涉及调试的问题。我想让你问，我如何找出整个标记的哪个元素导致滚动条。任何一种方法都可以。我曾想过在开发者工具中搜索overflow，但这并没有真正帮助我。

有谁知道我该如何解决这个问题？

【问题讨论】：

显示正在发生的页面
@RST 我没有直播，我想这对这个问题并不重要。显然我可以在很长一段时间后搜索并找到它，但我想要它动态。
可能重复：stackoverflow.com/questions/4880381/…
遍历所有元素并检查边界矩形底部/右侧是否大于视口（或任何具有滚动条的元素）的高度/宽度。

【解决方案1】：

您需要检查几件事。首先，元素有溢出会产生滚动条：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/

请注意，某些触摸设备可能不会产生实际的“滚动条”，除非在滚动时。这不会检测到，而是检测到元素能够滚动。

【讨论】：