在 JavaScript 中禁用滾動

1. 在 JavaScript 中的滾動
2. 在 JavaScript 中使用 scrollTo() 禁用滾動

在今天的文章中，我們將瞭解如何使用純 JavaScript 禁用滾動事件。

在 JavaScript 中的滾動

滾動是在螢幕上從右到左或上下移動文字以顯示不能包含在單個顯示影象中的文字的行為。滾動是影象、視訊或文字在螢幕上的垂直或水平滑動運動。

滾動可以雙向進行，有或沒有使用者干預。大多數應用程式和智慧裝置都提供此功能，允許你顯示太大的內容而無法完全適應螢幕。

它被認為是導航的基本方法之一。

滾動通常使用滑鼠（通常帶有內建滾輪）或桌上型電腦和膝上型電腦上的觸控板完成。在移動裝置上，你通常使用手指或觸控筆進行滾動。

在 JavaScript 中使用 scrollTo() 禁用滾動

Window.scrollTo() 是 JavaScript 提供的一種內建方法，可以滾動到文件中的一組特定座標。

語法：

window.scrollTo(x-cord, y-cord)
window.scrollTo(options)

你希望顯示在左上角的文件的水平軸上的 x-cord 座標。沿著要在左上角顯示的文件的垂直軸的 y-cord 座標。

作為一個選項，scrollTo 函式採用以下引數。

1. top 屬性指定沿 Y 軸滾動視窗或元素的畫素數。
2. left 屬性指定沿 X 軸滾動視窗或元素的畫素數。
3. behavior 屬性指定滾動是否應該平滑（柔和）或是否應該在單次跳轉中立即發生（自動是預設值）。

在 window.scrollTo() 的文件中查詢更多資訊。

讓我們舉一個帶有 2 個按鈕的示例，一個將啟用滾動，另一個將禁用滾動。內容渲染完成後，你可以根據需要呼叫此功能。

例子：

<button type="button" id="disabled">Disable scrolling</button>
<button type="button" id="enabled">Enable scrolling</button>
<div>scroll The page</div>

div {
  background-color: #f0f0f0;
  height: 150vh;
  line-height: 150vh;
  text-align: center;
}

function scrollEvent() {
  window.scrollTo(0, 0)
}

disabled.addEventListener('click', () => {
  window.addEventListener('scroll', scrollEvent)
})

enabled.addEventListener('click', () => {
  window.removeEventListener('scroll', scrollEvent)
})

addEventListener() 是 JavaScript 提供的整合方法。此方法註冊一個事件偵聽器。它是 EventTarget 介面的一個方法。

每當在目標上檢測到指定的事件時，就會呼叫我們配置的函式。

我們附加了 2 個事件偵聽器來偵聽按鈕的單擊事件。一旦使用者點選 disable 按鈕，我們將滾動到左上角位置，並且總是如此。

一旦使用者點選 enabled 按鈕，我們移除事件監聽器，它監聽滾動事件，並且座標可以自由移動。

輸出：