css隐藏滚动条但能滚动

/* 隐藏滚动条但能滚动的示例代码 */

/* 方法1：通过设置 overflow 和 scrollbar-width 属性 */
.container {
  /* 隐藏滚动条，但仍可以滚动 */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;     /* Firefox */
  overflow-y: scroll;        /* 允许垂直滚动 */
}

/* 方法2：通过设置 ::-webkit-scrollbar 伪元素（适用于 WebKit 浏览器） */
.container::-webkit-scrollbar {
  display: none;  /* 隐藏滚动条 */
}

解释说明：

1. 方法1 使用了 -ms-overflow-style 和 scrollbar-width 属性来隐藏滚动条。这些属性分别针对 Internet Explorer 和 Firefox 浏览器。

   • -ms-overflow-style: none;：用于隐藏 IE 浏览器中的滚动条。
   • scrollbar-width: none;：用于隐藏 Firefox 浏览器中的滚动条。
   • overflow-y: scroll;：确保容器仍然可以垂直滚动。

2. 方法2 使用了 ::-webkit-scrollbar 伪元素，它适用于基于 WebKit 的浏览器（如 Chrome 和 Safari）。通过将 display 设置为 none，可以隐藏滚动条，同时保持滚动功能。

这两种方法结合使用可以确保在大多数现代浏览器中都能实现隐藏滚动条但仍然可以滚动的效果。