使用滚动查找所有元素答案

【问题标题】：Finding all elements with a scroll使用滚动查找所有元素
【发布时间】：2016-04-04 14:14:56
【问题描述】：

查找页面上所有具有滚动的元素的最可靠和最有效的方法是什么？

目前，我正在考虑使用element.all() 和filter() 比较height 和scrollHeight 属性值：

element.all(by.xpath("//*")).filter(function (elm) {
    return protractor.promise.all([
        elm.getAttribute("height"),
        elm.getAttribute("scrollHeight")
    ]).then(function (heights) { 
        return heights[1] > heights[0];
    });
});

但我不确定这种方法的正确性和性能。

【问题讨论】：

使用 vanilla JS 你可以做这样的事情Array.prototype.slice.call(document.querySelectorAll('*')).filter(function(el){‌return el.offsetHeight !== el.scrollHeight}) 但是如果你在这个页面上执行它你会看到一些没有滚动条的元素所以我认为它不可靠。只是想对此发表评论，我还没有具体的答案。
@AndrewTempleton 别担心，今天将审查并决定赏金。并感谢您的回答！

标签： javascript selenium selenium-webdriver scroll protractor

【解决方案1】：

这适用于水平和垂直滚动条。诀窍是检测太宽/太短以及计算出的 CSS 是否允许您显示滚动条。

var ElementsWithScrolls = (function() {
    var getComputedStyle = document.body && document.body.currentStyle ? function(elem) {
        return elem.currentStyle;
    } : function(elem) {
        return document.defaultView.getComputedStyle(elem, null);
    };

    function getActualCss(elem, style) {
        return getComputedStyle(elem)[style];
    }

    function isXScrollable(elem) {
        return elem.offsetWidth < elem.scrollWidth &&
            autoOrScroll(getActualCss(elem, 'overflow-x'));
    }

    function isYScrollable(elem) {
        return elem.offsetHeight < elem.scrollHeight &&
            autoOrScroll(getActualCss(elem, 'overflow-y'));
    }

    function autoOrScroll(text) {
        return text == 'scroll' || text == 'auto';
    }

    function hasScroller(elem) {
        return isYScrollable(elem) || isXScrollable(elem);
    }
    return function ElemenetsWithScrolls() {
        return [].filter.call(document.querySelectorAll('*'), hasScroller);
    };
})();

ElementsWithScrolls();

【讨论】：

【解决方案2】：

它将选择body标签内滚动溢出和未溢出的元素：

$('body *').filter(function() {
     return ($(this).scrollTop() != 0 || $(this).css('overflow') == 'scroll');
});

【讨论】：