JavaScript scrollBy()

admin發表於2018-09-22
JavaScript

scrollBy方法可以將文件位置移動指定尺寸，單位是畫素（px）window物件方法。

方法的命名和其功能密切相關，可以看到scrollBy單詞是由scroll+by構成。

by意思眾多，其中一個意思是表示相差，例如，We missed the train by 5 minutes，表示一個差距，可以表示時間差，也可以表示尺寸差等，由此猜想scrollBy設定的尺寸不是一個絕對值，而是基於上一次值的一個增量。

更多關於window物件內容參閱JavaScript window 物件一章節。

特別說明：凡是屬於window物件的方法都可以直接使用，無需使用window物件呼叫。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
scrollBy(x,y)

引數解析:

（1）.x：必需，規定滾動條向右滾動的距離，也就是文件內容向左移動的距離。

（2）.y：必需，規定滾動條想下滾動的距離，也就是文件內容向上移動的距離。

瀏覽器支援:

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>螞蟻部落</title>
<style>
*{
    margin:0px;
    padding:0px;
}
body{
    width:1800px;
    height:1200px;
}
input{
    position:absolute;
    left:200px;
    top:200px;
}
</style>
<script>
function func(){
 window.scrollBy(100,100);
}
window.onload=function(){
 let bt=document.getElementById("bt");
 bt.onclick=function(){
    func()
 }
}
</script>
</head>
<body>
<input type="button" value="檢視效果" id="bt"> 
</body>
</html>

上面的程式碼每點選一次按鈕就會在當前文件位置基礎上在水平和垂直方位分別增加100px的位移量。

可以看到scrollBy方法設定的是增量，而不是一個絕對值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>螞蟻部落</title>
<style>
*{
    margin:0px;
    padding:0px;
}
input{
    position:absolute;
    left:200px;
    top:200px;
}
</style>
<script>
function func(){
 window.scrollBy(100,100);
}
window.onload=function(){
 let bt=document.getElementById("bt");
 bt.onclick=function(){
    func()
 }
}
</script>
</head>
<body>
<input type="button" value="檢視效果" id="bt"> 
</body>
</html>

再看上面程式碼的效果，點選按鈕之後，頁面沒有任何變化。

此程式碼與前面程式碼唯一的區別是刪除了CSS程式碼中關於body尺寸的設定。

刪除相關css程式碼之後，頁面的滾動條消失了，滾動條也就消失了，那麼也就沒有scoll滾動的可能了。

相關文章