CSS中隐藏滚动条的同时保留滚动功能

在 CSS 中，我们可以通过一些技巧来隐藏滚动条，同时保留滚动功能。以下是几种常用的方法和具体的实现步骤。

1. 使用 overflow 和 ::-webkit-scrollbar

这种方法适用于大多数现代浏览器。通过设置 overflow 属性启用滚动，同时利用 ::-webkit-scrollbar 来隐藏滚动条（此伪元素只适用于 WebKit 内核的浏览器，如 Chrome 和 Safari）。

实现步骤：

.scrollable {
  overflow: scroll; 
}


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

示例：

div class="scrollable" style="width: 300px; height: 200px; overflow: scroll;">
  p> 这里有很多内容，这段文本应该会产生滚动。p>
  p> 这里有很多内容，这段文本应该会产生滚动。p>
  p> 这里有很多内容，这段文本应该会产生滚动。p>
div>

2. 使用 -ms-overflow-style 和 scrollbar-width

这是另外一种方式，用于不同的浏览器。-ms-overflow-style 用于 Internet Explorer 和 Edge，scrollbar-width 用于 Firefox。

实现步骤：

.scrollable {
  overflow: auto;
  -ms-overflow-style: none;  
}


.scrollable {
  scrollbar-width: none; 
}

示例：

div class="scrollable" style="width: 300px; height: 200px; overflow: auto; -ms-overflow-style: none; scrollbar-width: none;">
  p> 这里有很多内容，这段文本应该会产生滚动。p>
  p> 这里有很多内容，这段文本应该会产生滚动。p>
  p> 这里有很多内容，这段文本应该会产生滚动。p>
div>

3. 使用负边距隐藏滚动条

这种方法通过使用父容器并将子元素设置为超出边界，以实现隐藏滚动条。

实现步骤：

.parent {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}


.child {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-right: 20px; 
  margin-right: -20px; 
}

示例：

div class="parent">
  div class="child">
    p> 这里有很多内容，这段文本应该会产生滚动。p>
    p> 这里有很多内容，这段文本应该会产生滚动。p>
    p> 这里有很多内容，这段文本应该会产生滚动。p>
  div>
div>

最常用的组合，确保主流浏览器兼容性：

为了确保在所有主流浏览器（如 Chrome、Safari、Firefox、Edge 和 IE）中隐藏滚动条的同时仍然保留滚动功能，可以结合前面提到的不同方法。以下是推荐的组合代码：

.scroll-container {
    overflow: auto; 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}


.scroll-container::-webkit-scrollbar {
    display: none; 
}

解释：

1. overflow: auto;: 启用滚动功能，适用于所有浏览器。
2. -ms-overflow-style: none;: 隐藏 Internet Explorer 和旧版 Edge 浏览器中的滚动条。
3. scrollbar-width: none;: 隐藏 Firefox 浏览器中的滚动条。
4. ::-webkit-scrollbar {display: none;}: 隐藏 WebKit 内核浏览器（如 Chrome 和 Safari）中的滚动条。

完整示例：

div class="scroll-container" style="width: 300px; height: 200px;">
  p> 这里有很多内容，这段文本应该会产生滚动。p>
  p> 这里有很多内容，这段文本应该会产生滚动。p>
  p> 这里有很多内容，这段文本应该会产生滚动。p>
div>

通过这个组合，滚动条将会在所有主流浏览器中被隐藏，同时确保滚动功能的正常使用。