Python selenium —— JS操控浏览器滚动条以及网
2016-11-04 本文已影响280人
灰蓝蓝蓝蓝蓝蓝
今天博主给大家分享一下用JS控制浏览器滚动条的办法。
1.兼容Firefox、Chrome、IE的浏览器滚动JS
经常有人会发现自己写的JS能够控制某个浏览器滚动条，但是却在另一个浏览器上不灵了，博主今天带给大家集中能够兼容Firefox、Chrome以及IE的滚动条滚动方法：
$(window).scrollTop(300);
$(document).scrollTop(300)
$("html,body").scrollTop(300);
都是jQuery的写法，原生js怎么办：
document.body.scrollTop = 300; // FireFox IE9+ 不可以
document.documentElement.scrollTop = 300; // Chrome 不可以 document.documentElement === html
没办法，以上两种写法，都是一个可以一个不行。所以还是用上面的jQuery的写法吧，要么你就自己判断浏览器类型从而选取不同的原生js写法。。
参考：传送门
2.如何控制浏览器内嵌div的滚动条
很多人疑惑怎么用selenium控制网页div中滚动条的滚动，其实这个问题很简单，用JS很简单就可以实现。
示例HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:auto;
}
</style>
</head>
<body>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
接下来我们用JS来控制里面的滚动条滚动：
from selenium import webdriver
dr=webdriver.Firefox()
dr.get('file:///D:/1.html')
js='document.getElementsByClassName("scroll")[0].scrollTop=10000'
# 就是这么简单，修改这个元素的scrollTop就可以
dr.execute_script(js)
注意：这里定位到的是产生滚动条的那个div，具体JS定位元素的方法如果不会请自行百度吧
当然，我们能做更多：
document.getElementsByClassName("scroll")[0].scrollHeight // 获取滚动条高度
document.getElementsByClassName("scroll")[0].scrollWidth // 获取横向滚动条宽度
document.getElementsByClassName("scroll")[0].scrollLeft=xxx // 控制横向滚动条位置
总结一下：
要想滚动内嵌div的滚动条，我们可以用js获取到该元素，然后使用以下方法：
元素.scrollTop=xxx // 纵向滚动到xxx位置，0是最顶端
元素.scrollLeft=xxx // 横向滚动到xxx位置，0是最左端
这样，不论是浏览器的滚动条还是页面div内的滚动条，我们都能控制了。
如果觉得文章对你有帮助，请轻轻地点个赞吧
更多关于python selenium的文章，请关注我的CSDN专栏：Python Selenium自动化测试详解
