只是禁用滚动不隐藏它？

当我们需要禁用一个页面或某个元素的滚动条时，通常会使用 CSS 属性 overflow: hidden;。然而，这样做会将滚动条完全隐藏，可能会导致用户感到困惑和不便。那么有没有一种方法可以只禁用滚动而不隐藏它呢？本文将为您介绍如何实现这一目标。

使用 JavaScript

首先，我们可以使用 JavaScript 来禁用滚动。具体来说，我们可以通过以下步骤来实现：

1. 获取要禁用滚动的元素。
2. 在元素上添加一个监听器，以捕获所有滚动事件。
3. 在监听器中阻止默认行为，从而防止滚动。

以下是示例代码：

const element = document.getElementById('my-element');

element.addEventListener('scroll', (event) => {
  event.preventDefault();
});

请注意，此代码仅禁用了元素的滚动，如果您需要禁用整个页面的滚动，可以将 document 替换为 window。

使用 CSS

另一种方法是使用 CSS position: fixed; 属性。该属性将元素的位置固定在视口中的特定位置，从而禁用其滚动。以下是示例代码：

<div class="scroll-disabled">
  <!-- Your content here -->
</div>

.scroll-disabled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
}

请注意，使用这种方法时，您需要指定元素的高度或使用其他布局属性来确保内容不会溢出视口。

总结

在本文中，我们介绍了两种禁用滚动但不隐藏滚动条的方法：使用 JavaScript 和 CSS。具体实现取决于您的需求和个人偏好，但无论哪种方法，都应该能够帮助您为用户提供更好的体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9713