滾動事件監聽器 JavaScript

1. JavaScript 中的滾動條和滾動條位置
2. JavaScript 中的滾動事件
3. 在 JavaScript 中監聽 scrollEvent
4. 在 jQuery 中使用 scroll 函式作為回撥
5. 使用 window 物件監聽 JavaScript 中的滾動事件

在本文中，我們將解釋如何在 JavaScript 中獲取滾動條位置，我們將討論：

• 滾動條和滾動條位置
• JavaScript 中的滾動事件

JavaScript 中的滾動條和滾動條位置

通常位於螢幕右側或底部的水平或垂直條允許你在某個方向上更改視窗檢視區域。

今天，大多數人都熟悉滾動條，因為他們需要在每個網頁上橫向檢視更多內容。

滾動條位置與視窗的檢視區域垂直和水平。向使用者顯示他滾動了多少或可以滾動到左側或底部。

頁面載入時的滾動位置為 0px，左側為 0px，頂部為 0px。

JavaScript 中的滾動事件

滾動事件是觸發垂直或水平滾動條位置的 JavaScript 事件。可以使用 JavaScript 事件偵聽器或 JavaScript 事件處理程式來偵聽它。

在 JavaScript 中監聽 scrollEvent

由於 scroll 是一個 JavaScript 事件，我們可以通過新增一個事件監聽器來監聽任何文件物件模型元素上的滾動事件。

<div id="content">
   This is a random paragraph, we will be wrting this paragraph for our basic understanding. Nothing here is going to make sense. So you could stop reading the paragraph. And look at the source code if you want.
</div>
<script>
   document.getElementById("content").addEventListener("scroll", () => console.log("Div was scrolled"));
    //logs: Div was scrolled
</script>

在上面提到的程式碼中，有一個 div 元素。JavaScript 部分中有一個事件偵聽器，用於偵聽該特定 div 元素上的滾動事件。

每當有人在該 div 內滾動時，它都會記錄一個字串，上面寫著 Div was scrolled。

在 jQuery 中使用 scroll 函式作為回撥

類似地，可以使用 JavaScript 框架（例如 jQuery）來處理 JavaScript 事件。

<div id="content">
   This is a random paragraph, we will be wrting this paragraph for our basic understanding. Nothing here is going to make sense. So you could stop reading the paragraph. And look at the source code if you want.
</div>
<script>
    $("#content").scroll(function(){
      console.log("Div was scrolled")
    });
    //logs: Div was scrolled
</script>

一個 jQuery 滾動事件附加到 id 為 content 的 div 元素。

jQuery 的 scroll 方法有一個回撥函式，每當有人在 div 內滾動時都會觸發該回撥函式。

使用 window 物件監聽 JavaScript 中的滾動事件

我們可以使用 JavaScript 物件來監聽視窗上的滾動事件，因為我們知道 window 物件與任何其他 JavaScript 物件沒有什麼不同。

我們可以使用滾動事件監聽器來監聽滾動事件。

window.addEventListener("scroll", (event) => {
    let scrollY = this.scrollY;
    let scrollX = this.scrollX;
    console.log(scrollY);
    console.log(scrollX);
});

this 表示 window 物件。scrollY 是 window 的一個屬性，它告訴我們從頂部滾動的視窗檢視區域中的畫素數。

scrollX 是 window 物件的一個​​屬性，它告訴使用者從左側滾動了多少。