在前端开发中，我们经常需要控制网页的滚动行为。有时候，我们希望能够暂时禁用滚动，例如当弹出对话框或下拉菜单时，防止用户在背景上进行滚动操作。那么，在这篇文章中，我们将会讨论如何实现这个功能。
禁用滚动的基本思路
禁用页面的滚动并不是一项困难的任务。我们可以使用 JavaScript 编写代码来管理文档流，并通过 CSS 样式来改变滚动条的外观和行为。通常情况下，我们可以通过以下三种方法来实现禁用滚动：
- 禁用所有的滚动
- 禁用垂直滚动
- 禁用水平滚动
在接下来的部分，我们将会详细了解这些方法的实现，并提供带有示例代码的解决方案。
禁用所有的滚动
如果你想要完全禁用页面的滚动，那么你可以使用下面的代码：
-- -------------------- ---- ------- -- ----------- ----- ---- - ------------------------- -- ---------- ----- -------------- - ------------------ -- --------------- -- ----------------------- ----- -------------- - ----------------- - ----------------- -- -------------- ------------------- - --------- ----------------------- - ----------------------
这段代码会获取当前文档的根节点，并缓存当前的滚动位置。接着，它会计算滚动条的宽度，并给文档根节点添加样式来禁用滚动。最后，在样式中添加了一个 padding 值，以避免当滚动条消失时页面跳动。
要恢复滚动，你可以使用下面的代码：
-- -------------------- ---- ------- -- ----------- ----- ---- - ------------------------- -- -------------- ------------------- - --- ----------------------- - --- -- ----------- ------------------ ----------------
这段代码会移除之前为禁用滚动添加的样式，并设置滚动位置回到缓存的值。
禁用垂直滚动
如果你只想禁用页面的垂直滚动，而保留水平滚动，则可以使用以下代码：
-- -------------------- ---- ------- -- ----------- ----- ---- - ------------------------- -- ---------- ----- -------------- - ------------------ -- --------------- -- ----------------------- ----- -------------- - ----------------- - ----------------- -- ---------------- -------------------- - --------- ----------------------- - ----------------------
这段代码与前面的代码基本相同，只是将 overflow 属性从 "hidden" 更改为 "hidden-y"，以便仅禁用垂直滚动。
要恢复垂直滚动，你可以使用以下代码：
-- -------------------- ---- ------- -- ----------- ----- ---- - ------------------------- -- ---------------- -------------------- - --- ----------------------- - --- -- ----------- ------------------ ----------------
禁用水平滚动
如果你只想禁用页面的水平滚动，而保留垂直
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8424