在前端开发中，用户体验至关重要。有时候我们需要禁用特定的滚动方式来提高页面交互性，例如，禁用使用箭头键上下滚动而保留鼠标滚轮的功能。本文将介绍如何使用JavaScript和CSS实现这个效果。
方法
1. 监听按键事件
首先，我们需要创建一个函数来检测按键事件，并且在用户按下箭头键时禁止默认操作。我们可以使用event.preventDefault()方法来阻止默认滚动行为。
document.addEventListener("keydown", function(event) {
if (event.key == "ArrowUp" || event.key == "ArrowDown") {
event.preventDefault();
}
});这将阻止用户使用箭头键上下滚动页面。
2. 检测鼠标滚轮事件
接下来，我们需要创建另一个函数来检测鼠标滚轮事件，并确保它不被阻止。我们可以使用event.deltaY属性来检测滚轮方向并执行自定义的滚动操作。
document.addEventListener("wheel", function(event) {
if (event.deltaY < 0) {
// 向上滚动
} else if (event.deltaY > 0) {
// 向下滚动
}
});这将允许用户使用鼠标滚轮上下滚动页面。
3. 添加CSS样式
最后，我们需要添加一些CSS样式来禁用默认的箭头键上下滚动行为。我们可以使用以下代码：
body {
overflow-y: hidden;
}这将禁用所有的垂直滚动条，包括箭头键上下滚动和鼠标滚轮。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
-------
---- -
----------- -------
-
--------
-------
------
------------------------------
--------------------------------
--------
------------------------------------ --------------- -
-- ---------- -- --------- -- --------- -- ------------ -
-----------------------
-
---
---------------------------------- --------------- -
-- ------------- - -- -
-- ----
- ---- -- ------------- - -- -
-- ----
-
---
---------
-------
-------以上代码演示了如何阻止使用箭头键滚动而不影响鼠标滚轮。在这个例子中，我们使用了JavaScript和CSS来实现这个效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27643