使用滚动查找所有元素

找到在页面上滚动的所有元素的最可靠和最有效的方法是什么？使用滚动查找所有元素

目前，我正在考虑使用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

使用滚动查找所有元素

回答

相关问题