在前端开发中，有时候我们希望禁用浏览器或特定元素的滚动条，而只允许使用滚动轮或箭头键来进行页面滚动。这在某些情况下可以提高用户体验，比如在一些弹出框、模态框中禁用背景页面的滚动条。
禁用浏览器滚动条
禁用浏览器滚动条需要对 document 对象进行操作。我们可以通过以下代码来禁用浏览器的滚动条：
document.body.style.overflow = 'hidden';
在以上代码中，我们将 body 元素的 overflow 样式设置为 hidden，即可禁用滚动条。同样地，如果需要启用滚动条，只需将 overflow 样式设置为 auto 即可。
禁用特定元素的滚动条
如果需要针对特定元素进行滚动条控制，则需要对该元素进行操作。以下代码演示了如何禁用一个具有自定义 scrollbar 样式的 div 元素的滚动条：
<div id="my-div" style="overflow: scroll; height: 200px; scrollbar-width: thin;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div>
const myDiv = document.getElementById('my-div');
myDiv.style.scrollbarWidth = 'none';在以上代码中，我们首先获取了具有 my-div ID 的 div 元素，并将其样式中的 scrollbar-width 属性设置为 thin。接着，我们通过 JavaScript 将其设置为 none，即可禁用滚动条。同样地，如果需要启用滚动条，则将 scrollbar-width 属性设为其他值即可。
允许使用滚动轮或箭头键进行滚动
禁用滚动条并不意味着用户不能使用滚动轮或箭头键来滚动页面。为了允许这些操作，我们需要监听相关事件，并编写相应的代码来实现滚动功能。
以下是一个简单的示例，演示了如何使用滚动轮和箭头键来滚动页面：
-- -------------------- ---- -------
---------------------------------- ------- -- -
----- ----- - -------------
---------------------------------- -- ------
---
------------------------------------ ------- -- -
----- --- - ----------
-- ---- --- ----------- -- --- --- ------------- -
---------------------------------- -- ---
- ---- -- ---- --- --------- -- --- --- ------------ -
---------------------------------- -- ---
-
---在以上代码中，我们监听了 wheel 和 keydown 事件，并编写了相关的代码来实现滚动功能。具体来说，当用户滚动鼠标滚轮时，我们获取滚动的距离，并将其添加到 documentElement 的 scrollTop 属性上，以实现页面滚动；而当用户按下箭头键时，我们将 scrollTop 属性相应地增加或减少，以实现页面滚动。
总结
通过上述方法，我们可以禁用浏览器或特定元素的滚动条，同时允许使用滚动轮或箭头键进行页面滚动。这对于一些特殊的页面布局和用户体验优化非常
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14531