css 隐藏滚动条且可滚动

在CSS中隐藏元素的滚动条同时保持其可滚动特性，可以使用相对定位或者绝对定位结合 `overflow` 属性实现。

### 使用相对定位隐藏滚动条：

当你想要在一个块级元素内部添加滚动条，但是又想让这个块级元素本身不可见（例如作为容器），可以将该元素设置为 `position: relative;` 并将其宽度或高度设为小于内容的实际大小。然后，将实际的内容区域（通常使用另一个内联元素或内部包含其他内容的块级元素）设置为 `position: absolute;` 或者 `position: fixed;` 等，并为其添加足够的 `width` 和 `height` 来容纳所有内容。这时，尽管外部容器不可见，但内部的内容仍可通过滚动进行查看。

.container {
  position: relative;
  width: 400px; /* 设置为比内容稍微小一点 */
  height: 200px; /* 同上 */
  overflow-y: scroll; /* 只显示垂直滚动条 */
}

.content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* 覆盖整个外部容器 */
}

### 使用绝对定位隐藏滚动条：

如果你只想在特定区域内实现滚动效果而整体布局需要保持整洁，可以考虑在特定的容器上应用绝对定位，并通过调整外层容器的高度来适应内层滚动部分的内容。

.scrollable-container {
  position: relative;
  width: 500px;
  height: 300px; /* 这里可以根据内容自适应调整 */
}

.scroll-content {
  position: absolute;
  width: 100%;
  height: auto; /* 让浏览器自动计算高度 */
  overflow-y: scroll;
}

这两种方法都可以有效地控制元素是否显示滚动条以及何时启用滚动功能。根据具体的页面设计需求选择合适的方式。

---
## 相关问题 - CSS隐藏滚动条且可滚动:

1. **如何精确控制滚动条的位置？**
- 如果希望更精确地控制滚动条的位置，可以利用 JavaScript 结合 CSS 的手段，动态修改元素的样式和位置属性。

2. **在网页上隐藏所有滚动条怎么办？**
- 可以通过全局设置 CSS 规则，例如将所有元素的滚动条都隐藏起来：

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

3. **当滚动内容超过设定高度时，如何只显示底部滚动条而不影响其他元素？**
- 可以单独对包含滚动内容的部分设置滚动条规则，并仅在达到预设高度时才显示：

     .only-show-bottom-scrollbar {
       overflow-y: scroll;
       scrollbar-width: thin; /* 根据需要调整滚动条粗细 */
     }

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

     .only-show-bottom-scrollbar:hover {
       ::-webkit-scrollbar {
         display: block;
       }
     }

- 这种做法适用于鼠标悬停时显示滚动条的情况，可以增加用户体验的流畅感。