在 JavaScript 中設定滾動位置

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 scrollTo() 方法設定滾動位置
  2. 在 JavaScript 中使用 scrollBy() 方法設定滾動位置
  3. 使用 scrollLeftscrollTop 屬性以及 HTML 屬性 onscroll
  4. 在 JavaScript 中使用 eventListener 設定滾動位置
在 JavaScript 中設定滾動位置

本教程將介紹如何在 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>

輸出:

使用 scrollTo() 方法設定滾動位置

由於我們已將其設定為最多移動 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>

輸出:

使用 scrollBy() 方法設定滾動位置

使用 scrollLeftscrollTop 屬性以及 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>&nbsp;&nbsp;&nbsp;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 屬性以及 HTML 屬性 onscroll

scrollLeftscrollTop 返回確切的幀位置,也就是相對於其他維度的滾動位置。在我們的輸出中,我們得到水平滾動 9.6 和垂直滾動 14.39。

儘管 scrollTo()scrollBy() 需要最少的程式碼行來實現,但這些屬性會將整個面板轉移到你想要的位置。

在 JavaScript 中使用 eventListener 設定滾動位置

對於 addEventListener(),我們將再次使用 scrollLeftscrollTop 屬性來處理滾動位置值。該方法使用滾動來應用功能。

<!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>&nbsp;&nbsp;&nbsp;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>

輸出:

使用 eventListener 設定滾動位置

在示例中,我們考慮了 div 元素並對其進行操作以將水平移動值設為 4,將垂直移動值設為 9.6。

然而,我們對 scrollLeftscrollTop 使用了 jQuery 命令的一小部分。另一種方法是使用功能類似於 scrollTo()scroll() 方法。

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript Scroll