スクロールですべての要素を見つける

Question

ページ上でスクロールするすべての要素を見つける最も信頼性が高く効率的な方法は何ですか？

---

現在、私はheightとscrollHeight属性値の比較filter()でelement.all()を使用して考えている：

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

これは、水平スクロールバーと垂直スクロールバーの両方で機能します。このトリックは、計算されたCSSがスクロールバーを表示できるようにするには、あまりにも広い/小さすぎるANDを検出しています。

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タグ内のオーバーフローや非あふれた巻物を持つ要素を選択します：あなたはこの `Array.prototype.slice.call（document.querySelectorAllような何かを行うことができバニラJSを使用して

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