資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 配置跨瀏覽器的滑鼠滾輪速度？
我們可以使用 JavaScript 來改變網頁的行為。每個瀏覽器在使用者使用滑鼠滾輪滾動時都有一個預設的滾動速度。但是，我們可以使用 JavaScript 來控制它。
我們還可以使用滑鼠滾輪來放大和縮小網頁。在這種情況下，我們需要降低滑鼠滾輪的速度。此外，開發人員有時需要滾動速度限制，例如在網站規則中，以便使用者能夠正確閱讀。
在本教程中，我們將學習控制滑鼠滾輪速度的不同方法。
語法
使用者可以按照以下語法使用“wheel”事件來使用 JavaScript 配置跨瀏覽器的滑鼠滾輪速度。
content.addEventListener("wheel", (event) => {
let deltaY = event.deltaY;
content.scrollTop += deltaY / n;
});
我們在上述語法中使用 deltaY 屬性獲取當前的滾動速度。之後，我們將當前的滾動速度除以 n 來更改滾動速度。開發人員應增加 n 的值以降低滾動速度，並減少 n 的值以增加滾動速度。
示例 1（使用 Wheel 事件）
在下面的示例中，我們建立了內容 div 元素並添加了文字內容。在 CSS 中，我們設定了 div 元素的尺寸並設定了 overflow scroll 以使 div 可滾動。
在 JavaScript 中，我們使用 addEventListner() 方法觸發“wheel”事件並獲取當前的滾動速度。之後，我們將滾動速度降低了 50 倍。在輸出中，使用者可以嘗試滾動 div 元素並觀察緩慢的滾動速度。
<html>
<head>
<style>
#content {
height: 300px;
width: 300px;
overflow-y: scroll;
padding: 10px;
font-size: 20px;
font-family: Arial, sans-serif;
background-color: pink;
}
</style>
</head>
<body>
<h3> Using the <i> wheel event listener </i> to change the mouse wheel scroll speed </h3>
<div id = "content">
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
<h2> Scroll this div. </h2>
</div>
<script>
const content = document.getElementById("content");
content.addEventListener("wheel", (event) => {
event.preventDefault();
// getting the scrolling speed.
let deltaY = event.deltaY;
// decreasing the scrolling speed by 50 times
let speed = deltaY / 50;
// scrolling the content of the div element
content.scrollTop += speed;
});
</script>
</body>
</html>
示例 2（為 Chrome 瀏覽器使用 Mousewheel 事件）
在下面的示例中，我們使用了“mousewheel”事件。當用戶在 Chrome 瀏覽器中使用滑鼠滾輪滾動網頁時，它會觸發“mousewheel”事件。
在這裡，我們將當前的滾動速度乘以 0.03 以將滾動速度降低 97%。但是，它與“wheel”事件非常相似。
<html>
<head>
<style>
#content {
height: 200px;
width: 200px;
overflow-y: scroll;
padding: 10px;
font-size: 60px;
font-family: Arial, sans-serif;
background-color: aqua;
}
</style>
</head>
<body>
<h3> Using the <i> mousewheel event listener </i> to change the mouse wheel scroll speed in Chrome browser </h3>
<div id = "content"> Scroll This div using the mouse wheel. </div>
<script>
const content = document.getElementById("content");
content.addEventListener("mousewheel", (event) => {
event.preventDefault();
const deltaY = event.deltaY;
content.scrollTop += deltaY * 0.03;
});
</script>
</body>
</html>
示例 3（為 Firefox 瀏覽器使用 DomMouseScroll 事件）
在下面的示例中，我們使用了“DomMouseScroll”事件。Firefox 瀏覽器只支援它，而不支援其他瀏覽器，如 Chrome、Opera 等。
我們使用事件的“detail”屬性獲取當前的滾動速度，並將其乘以 0.5 以將滾動速度降低一半。使用者可以在 Firefox 瀏覽器中開啟以下網頁，觀察 div 元素滾動速度的變化。
<html>
<head>
<style>
#content {
height: 200px;
width: 200px;
overflow-y: scroll;
padding: 10px;
font-size: 40px;
background-color: green;
}
</style>
</head>
<body>
<h3> Using the <i> DOMMouseScroll event listener </i> to change the mouse wheel scroll speed in Chrome browser </h3>
<div id = "content"> Scroll down or up with the mouse wheel inside the div to see the effect. </div>
<script>
const content = document.getElementById("content");
content.addEventListener("DOMMouseScroll", (event) => {
event.preventDefault();
const deltaY = event.detail;
content.scrollTop += deltaY * 0.5;
});
</script>
</body>
</html>
示例 4（從網頁自定義滑鼠滾輪速度）
在下面的示例中，我們允許使用者從 Web 瀏覽器更改滑鼠滾輪滾動速度。我們建立了範圍滑塊，它接收 1 到 50 之間的輸入。使用者可以更改範圍滑塊的值。
之後，每當使用者滾動 div 元素時，JavaScript 會根據範圍滑塊中選擇的值設定滾動速度。
<html>
<head>
<style>
#content {
height: 200px;
width: 200px;
overflow-y: scroll;
padding: 10px;
font-size: 20px;
font-family: Arial, sans-serif;
background-color: aqua;
}
</style>
</head>
<body>
<h3> Using the <i> wheel event listener </i> to change the mouse wheel scroll speed </h3>
<div id = "content"> Git is a distributed version control system used to manage source code and other files. It allows developers to track changes to their codebase over time, collaborate with others, and easily revert to previous versions if necessary. Git is widely used in software development and has become an essential tool for modern programming teams. </div>
<!-- adding input range for mouse scroll -->
<input type = "range" min = "3" max = "50" value = "20" id = "myRange" />
<script>
const content = document.getElementById("content");
content.addEventListener("wheel", (event) => {
event.preventDefault();
let value = document.getElementById("myRange").value;
let deltaY = event.deltaY;
if (deltaY > 0) {
deltaY = value;
} else if (deltaY < 0) {
deltaY = -value;
}
content.scrollTop += deltaY;
});
</script>
</body>
</html>
使用者學習瞭如何使用 JavaScript 控制跨瀏覽器的滑鼠滾輪滾動速度。本教程使用了三個事件來配置滑鼠滾輪速度。第一個事件是“wheel”事件，它與所有瀏覽器相容。第二個事件是“mousewheel”，它與除 Firefox 之外的所有瀏覽器相容。第三個事件是“DOMMouseScroll”，它僅與 Firefox 相容。
5K+ 閱讀量
