Поиск всех элементов со свитком

Какой самый надежный и эффективный способ найти все элементы, имеющие прокрутку на странице?

В настоящее время я думаю об использовании 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];
    });
});

Но я не уверен в правильности и производительности этого подхода.

Ответ 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');
});