使用滾動查找所有元素

找到在頁面上滾動的所有元素的最可靠和最有效的方法是什麼？使用滾動查找所有元素

目前，我正在考慮使用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]; 
    }); 
});

但我不知道這種方法的正確性和性能。

來源

2015-12-30 alecxe

使用香草JS，你可以做這樣的事情'Array.prototype.slice.call（document.querySelectorAll （'*'））。filter（function（el）{return el.offsetHeight！== el.scrollHeight}）'但是如果你在這個頁面上執行它，你會看到一些沒有滾動條的元素，所以我認爲它不可靠。只是想評論一下，我還沒有具體的答案。 – A1rPun

@AndrewTempleton不用擔心，今天會審查和決定賞金。並感謝您的答案！ – alecxe

這適用於水平和垂直滾動條。訣竅是檢測太寬/太短，如果計算的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();

來源

2016-01-10 01:05:38

會以選擇的身體標記內溢出和非溢出滾動元素：

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

來源

2016-01-15 13:05:48 Filipe

使用滾動查找所有元素

回答

相關問題