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

Question

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

---

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

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

Answer 1

Это работает как с горизонтальной, так и с вертикальной полосой прокрутки. Трюк обнаруживает BOTH слишком широкий/слишком короткий И, если вычисленный 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(); 

Answer 2

Он будет выбирать элементы с переполненными и не-переполнены свитками внутри тела тега:

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