今天博主給大家分享一下用JS控制瀏覽器滾動(dòng)條的辦法。
1.兼容Firefox厌杜、Chrome、IE的瀏覽器滾動(dòng)JS
經(jīng)常有人會(huì)發(fā)現(xiàn)自己寫的JS能夠控制某個(gè)瀏覽器滾動(dòng)條，但是卻在另一個(gè)瀏覽器上不靈了桑驱，博主今天帶給大家集中能夠兼容Firefox、Chrome以及IE的滾動(dòng)條滾動(dòng)方法：
$(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
沒辦法熬的，以上兩種寫法，都是一個(gè)可以一個(gè)不行赊级。所以還是用上面的jQuery的寫法吧押框，要么你就自己判斷瀏覽器類型從而選取不同的原生js寫法。理逊。
參考：傳送門
2.如何控制瀏覽器內(nèi)嵌div的滾動(dòng)條
很多人疑惑怎么用selenium控制網(wǎng)頁div中滾動(dòng)條的滾動(dòng)橡伞，其實(shí)這個(gè)問題很簡單盒揉，用JS很簡單就可以實(shí)現(xiàn)。
示例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來控制里面的滾動(dòng)條滾動(dòng)：
from selenium import webdriver
dr=webdriver.Firefox()
dr.get('file:///D:/1.html')
js='document.getElementsByClassName("scroll")[0].scrollTop=10000'
# 就是這么簡單兑徘，修改這個(gè)元素的scrollTop就可以
dr.execute_script(js)
注意：這里定位到的是產(chǎn)生滾動(dòng)條的那個(gè)div刚盈，具體JS定位元素的方法如果不會(huì)請自行百度吧
當(dāng)然，我們能做更多：
document.getElementsByClassName("scroll")[0].scrollHeight // 獲取滾動(dòng)條高度
document.getElementsByClassName("scroll")[0].scrollWidth // 獲取橫向滾動(dòng)條寬度
document.getElementsByClassName("scroll")[0].scrollLeft=xxx // 控制橫向滾動(dòng)條位置
總結(jié)一下：
要想滾動(dòng)內(nèi)嵌div的滾動(dòng)條挂脑，我們可以用js獲取到該元素藕漱，然后使用以下方法：
元素.scrollTop=xxx // 縱向滾動(dòng)到xxx位置，0是最頂端
元素.scrollLeft=xxx // 橫向滾動(dòng)到xxx位置最域，0是最左端
這樣谴分，不論是瀏覽器的滾動(dòng)條還是頁面div內(nèi)的滾動(dòng)條，我們都能控制了镀脂。
如果覺得文章對你有幫助牺蹄，請輕輕地點(diǎn)個(gè)贊吧
更多關(guān)于python selenium的文章，請關(guān)注我的CSDN專欄：Python Selenium自動(dòng)化測試詳解
