html滚动条自动翻页,Web UI自动化测试－滚动条操作 scrollTop、scrollHeight与clientHeight的重要关系...

前端开发中 动态效果是由js实现的，所以这个滚动的动作也是js实现的

滚动条要分清楚是系统自己的滚动条还是元素自己的滚动条

系统滚动条：

# scrollIntoView() 元素与页面顶部对齐 如果顶部有个遮罩层 就可能看不到。

scrollIntoView(false) 与页面底部对齐

driver.execute_script("arguments[0].scrollIntoView(false);", ele)

window.scrollTo(0,document.body.scrollHeight)"

直接滚动到页面底部 (常用于要用翻页控件)：

driver.execute_script("window.scrollTo(0,document.body.scrollHeight)")

直接滚动到页面顶部：

driver.execute_script("window.scrollTo(document.body.scrollHeight,0)")

原生scrollbar

scrollTop

定义：获取或设置元素的内容向上滚动的像素值

clientHeight

定义：clientHeight = CSS height + CSS padding + 水平滚动条的高度

scrollHeight

定义：只读属性是一个元素的所含的高度的测定，包括由于溢出内容在屏幕上不可见的。

关系公式：element.scrollHeight - element.scrollTop === element.clientHeight

解释：此公式可以用于判断是否滚动到底

dom属性

scrollTop： 获取或设置一个元素的内容垂直滚动的像素数，当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0

定义：获取或设置元素的内容向上滚动的像素值

二、clientHeight

定义：clientHeight = CSS height + CSS padding + 水平滚动条的高度

三、scrollHeight

定义：只读属性是一个元素的所含的高度的测定，包括由于溢出内容在屏幕上不可见的。

这是一个只读属性，是元素内容高度的度量，包括由于溢出导致的视图中不可见的内容。注意：scrollHeight在没有滚动条的情况下，它的值跟下面要介绍的clientHeight相同。scrollHeight包括元素的padding，但不包括元素的border和margin

关系公式：element.scrollHeight - element.scrollTop === element.clientHeight

解释：此公式可以用于判断是否滚动到底

var ele = document.getElementById("test");

//判断元素是否出现了滚动条

if(ele.scrollHeight > ele.clientHeight) {

//设置滚动条到最底部

ele.scrollTop = ele.scrollHeight;

}

中间渲染时间差会导致错误的滚动距离。使用了延迟进行设置，如下：

if(ele.scrollHeight > ele.clientHeight) {

setTimeout(function(){

//设置滚动条到最底部

ele.scrollTop = ele.scrollHeight;

},500);

}

browser.execute(function (scrollbarSelector) {

let scrollbar = document.evaluate(scrollbarSelector, document).iterateNext();

if (scrollbar.scrollHeight > scrollbar.clientHeight) {

scrollbar.scrollTop = scrollbar.scrollHeight;

} else  {scrollbar.scrollTop = 0;}

}, scrollbarSelector, 2000)