当我们需要创建一个固定的头部、侧边栏或底部时，通常会使用CSS属性 position:fixed;。这样确实可以使元素固定，但是它也会导致页面内容发生 "抖动"，因为浏览器会在滚动时重新计算布局。为了解决这个问题，我们需要禁用页面的滚动行为。
最简单的方法是使用 CSS 属性 overflow:hidden;，但是这种方法并不总是适用于所有情况。例如，在某些情况下，我们可能只想禁用垂直滚动或水平滚动，而保留另一种类型的滚动。此外，如果您使用了 overflow:hidden;，则无法在内容溢出时滚动页面。
在本文中，我们将探讨两种方法来通过 jQuery 或JavaScript 禁用窗口滚动，而不使用 overflow:hidden;。
方法1：使用jQuery禁用窗口滚动
我们可以使用 jQuery 的 preventDefault() 和 stopPropagation()方法来阻止窗口滚动。其中，preventDefault() 会取消事件本身的默认动作，而 stopPropagation() 则会停止事件在DOM层次结构中的传播。
--------------------------- ----------- - ------------------- -------------------- ---
我们监听了 touchmove 事件，因为移动设备上的滚动是通过触摸屏幕进行的。如果您需要在桌面浏览器上禁用滚动，请改为使用 mousewheel 事件。
---------------------------- ----------- - ------------------- -------------------- ---
方法2：使用 JavaScript 禁用窗口滚动
相比于 jQuery，使用原生 JavaScript 来禁用窗口滚动更加简单。我们可以使用 addEventListener() 监听 touchmove 或 mousewheel 事件，并在事件发生时调用 preventDefault() 和 stopPropagation() 方法。
-------------------------------------- ----------- - ------------------- -------------------- -- - -------- ----- --- --------------------------------------- ----------- - ------------------- -------------------- -- - -------- ----- ---
需要注意的是，在现代浏览器中，addEventListener() 的第三个参数是一个选项对象。将 passive 属性设置为 false 可以确保事件不被浏览器忽略。
总结
在本文中，我们介绍了两种方法来禁用窗口滚动，而不使用 overflow:hidden;。虽然这些方法可能不适用于所有情况，但它们可以帮助您避免抖动和提高用户体验。学习和熟练掌握这些技术，可以让您更加灵活地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30563