在 JavaScript 中設定滾動位置
-
在 JavaScript 中使用
scrollTo()
方法設定滾動位置 -
在 JavaScript 中使用
scrollBy()
方法設定滾動位置 -
使用
scrollLeft
和scrollTop
屬性以及 HTML 屬性onscroll
-
在 JavaScript 中使用
eventListener
設定滾動位置
本教程將介紹如何在 JavaScript 中設定介面中的滾動位置。
在 JavaScript 中使用 scrollTo()
方法設定滾動位置
在本例中,我們將首先設定 body 元素的尺寸。下一步,我們將使用帶有 onclick
屬性的 button
元素來觸發函式 scrollL()
。
我們還將將此按鈕的位置設定為固定。我們將在指令碼標籤中新增函式定義,並且會有命令 window.scrollTo()
。
scrollTo()
方法將操作視窗物件。具體來說,它會左跳到 20 個單位,因為我們已經設定了這個值。
前一個引數用於水平移動,也稱為左滾動,後者用於垂直移動,頂部滾動。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
body {
width: 2000px;
height: 2000px;}
</style>
</head>
<body>
<p>Example of ScrollTo</p>
<button onclick="scrollL()" style="position:fixed">Scroll Horizontally!</button><br><br>
<script>
function scrollL() {
window.scrollTo(20, 0);
}
</script>
</body>
</html>
輸出:
由於我們已將其設定為最多移動 20 個單位,因此視窗物件將在輸出中水平移動。
由於 scrollTo()
方法只執行一次任務,因此該按鈕將使視口僅移動一次。
正如我們所見,我們將視口框架從 (0,0) 移動到 (20,0)。同樣,我們可以設定垂直位移的值。
在 JavaScript 中使用 scrollBy()
方法設定滾動位置
scrollBy()
方法的工作方式與 scrollTo()
方法類似。但是在這種情況下,移動不是基於一步的;相反,它會儘可能多地滾動。
在下面的程式碼中,我們將水平值設定為 10。這意味著框架將從 (0,0) 移動到 (10,0)。
此外,每次按下按鈕元素後,我們將獲得 10 個單位 (px) 的位移。
檢查提供的示例以獲得更好的理解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
body {
width: 2000px;
}
</style>
</head>
<body>
<p>Example of ScrollBy</p>
<button onclick="scrollL()" style="position:fixed">Scroll Horizontally!</button><br><br>
<script>
function scrollL() {
window.scrollBy(10, 0);
}
</script>
</body>
</html>
輸出:
使用 scrollLeft
和 scrollTop
屬性以及 HTML 屬性 onscroll
我們將在希望新增滾動位置的元素上使用這兩個屬性。
在我們的示例中,父 div=div1
的維度小於子 div=content
。這會造成溢位,所以我們必須設定屬性。
另外,請注意呼叫函式 keepUpTheScroll()
的 HTML 屬性 onscroll
。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
#div1 {
height: 250px;
width: 250px;
overflow: auto;
}
#content{
width:500px;
height:1250px;
background:black;
color:white;
}
</style>
</head>
<body>
<div id="div1" onscroll="keepUpTheScroll()">
<div id="content"><br> Scroll!</div>
</div>
<p id="show"></p>
<script>
function keepUpTheScroll(){
var div = document.getElementById('div1');
var x = div.scrollLeft;
var y = div.scrollTop;
document.getElementById ("show").innerHTML = "Horizontally: " + x + "px<br>Vertically: " + y + "px";
}
</script>
</body>
</html>
輸出:
scrollLeft
和 scrollTop
返回確切的幀位置,也就是相對於其他維度的滾動位置。在我們的輸出中,我們得到水平滾動 9.6 和垂直滾動 14.39。
儘管 scrollTo()
和 scrollBy()
需要最少的程式碼行來實現,但這些屬性會將整個面板轉移到你想要的位置。
在 JavaScript 中使用 eventListener
設定滾動位置
對於 addEventListener()
,我們將再次使用 scrollLeft
和 scrollTop
屬性來處理滾動位置值。該方法使用滾動
來應用功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
#div1 {
height: 250px;
width: 250px;
overflow: auto;
}
#content{
width:500px;
height:1250px;
background:purple;
color:white;
}
</style>
</head>
<body>
<div id="div1" onscroll="keepUpTheScroll()">
<div id="content"><br> Scroll!</div>
</div>
<p id="show"></p>
<script>
var div = document.getElementById('div1');
var show = document.getElementById('show');
div.addEventListener("scroll", event =>{
show.innerHTML = `scrollTop: ${div.scrollTop} <br>
scrollLeft: ${div.scrollLeft}`;
});
</script>
</body>
</html>
輸出:
在示例中,我們考慮了 div
元素並對其進行操作以將水平移動值設為 4,將垂直移動值設為 9.6。
然而,我們對 scrollLeft
和 scrollTop
使用了 jQuery
命令的一小部分。另一種方法是使用功能類似於 scrollTo()
的 scroll()
方法。