Suchen aller Elemente mit einem Bildlauf

Question

Was ist der zuverlässigste und effizienteste Weg, um alle Elemente mit einem Bildlauf auf einer Seite zu finden?

---

Derzeit denke ich über die Verwendung von element.all() mit filter() Vergleich der height und scrollHeight Attributwerte:

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]; 
    }); 
}); 

Aber ich bin über die Richtigkeit und die Leistung dieses Ansatzes nicht sicher.

Answer 1

Dies funktioniert mit horizontalen und vertikalen Bildlaufleisten. Der Trick besteht darin, BEIDE zu weit/zu kurz zu erkennen, UND wenn das berechnete CSS Ihnen erlauben wird, eine Bildlaufleiste anzuzeigen.

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

Es werden die Elemente mit übergelaufenen und nicht-überschwemmt wählen Rollen innerhalb des Körpers tag:

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