css鼠标横向滚动不显示滚动条，轻松实现左右查看！

2023-03-23 05:10:48

隐藏滚动条，实现流畅横向滚动的妙招

在网页设计中，鼠标横向滚动不显示滚动条是一个常见需求。它可以为网站提供更加简洁美观的外观，同时保持横向滚动的功能。以下是一些实现此效果的实用方法：

1. 使用overflow: hidden

#container {
  overflow: hidden;
}

这种方法是最直接的，只需在容器元素上设置 overflow: hidden 样式即可。这样，当内容超出容器元素时，滚动条将被隐藏。但是，这种方法的缺点是它也会隐藏容器元素内的其他元素，如按钮和链接。

2. 使用overflow: scroll

#container {
  overflow: scroll;
}

此方法与第一种方法类似，但它允许容器元素内的其他元素显示。当内容超出容器元素时，滚动条将出现在容器元素的右侧。然而，这种方法的缺点是滚动条可能会遮挡容器元素内的内容。

3. 使用::-webkit-scrollbar

::-webkit-scrollbar {
  display: none;
}

这种方法适用于 WebKit 内核的浏览器，如 Safari 和 Chrome。它可以通过隐藏滚动条来实现不显示滚动条的效果。但是，此方法仅适用于特定的浏览器。

4. 使用自定义滚动条

#container {
  overflow: scroll;
}

#scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background-color: #ccc;
}

#scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #000;
}

此方法允许您创建自定义的滚动条，并将其放置在容器元素的右侧。当内容超出容器元素时，滚动条将显示，但它不会遮挡容器元素内的内容。

5. 使用第三方库

如 perfect-scrollbar 等第三方库提供了一个简单的解决方案，可以实现自定义滚动条，并适用于所有浏览器。

// 安装第三方库
npm install perfect-scrollbar

// 在 JavaScript 中使用第三方库
import PerfectScrollbar from 'perfect-scrollbar';

// 初始化滚动条
const scrollbar = new PerfectScrollbar('#container');