CSS不显示滚动条但可以滚动

1. 引言

滚动条在网页设计中是一个常用的元素，用于在内容超出容器尺寸时提供滚动功能。默认情况下，滚动条是可见的，但在某些情况下，可能需要隐藏滚动条而仍然保留滚动功能。在本文中，我们将探讨如何使用 CSS 实现隐藏滚动条但仍然可以滚动的效果。

2. 隐藏滚动条

要隐藏滚动条，我们可以使用 overflow 属性。该属性决定当内容超出容器尺寸时如何处理。

.container {
  overflow: hidden;
}

使用 overflow: hidden; 将会隐藏滚动条，但同时也禁用了滚动功能。因此我们需要结合其他技术来实现滚动效果。

3. 自定义滚动条样式

为了实现可滚动的效果，我们可以使用伪元素和一些 CSS 属性来自定义滚动条的样式。

首先，我们需要创建一个滚动区域容器。

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

接下来，在 CSS 中，我们将通过 ::webkit-scrollbar 伪元素选择器来为滚动条添加样式。

.container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

这里我们设置了滚动条的宽度和高度为 10px，你可以根据自己的需求进行调整。接下来，我们可以为滚动条添加背景颜色和圆角等样式。

.container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f1f1f1;
  border-radius: 5px;
}

此时我们已经成功地自定义了滚动条的样式。但是，滚动条还是不能滚动。为了使其可滚动，我们可以为滚动区域容器添加 overflow 属性。

.container {
  overflow: auto;
}

添加 overflow: auto; 后，当内容超出容器尺寸时，会显示滚动条，并且可以通过鼠标滚轮或拖动滚动条来滚动内容。

4. 兼容性

需要注意的是，以上示例中使用的 ::webkit-scrollbar 是针对 WebKit 内核浏览器的样式选择器。不同的浏览器可能有不同的样式选择器。

为了兼容不同浏览器，我们可以使用 ::-webkit-scrollbar、::-moz-scrollbar 以及 ::-ms-scrollbar 等伪元素选择器来分别设置不同浏览器下的滚动条样式。

/* WebKit 内核浏览器样式 */
.container::-webkit-scrollbar {
  /* 样式 */
}

/* Firefox 浏览器样式 */
.container::-moz-scrollbar {
  /* 样式 */
}

/* IE/Edge 浏览器样式 */
.container::-ms-scrollbar {
  /* 样式 */
}

通过上述方式，我们可以为不同的浏览器设置不同的滚动条样式。

5. 示例

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS不显示滚动条但可以滚动</title>
  <style>
    .container {
      width: 300px;
      height: 200px;
      overflow: hidden;
    }

    .container::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      background-color: #f1f1f1;
      border-radius: 5px;
    }

    .container::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 5px;
    }

    .container::-webkit-scrollbar-thumb:hover {
      background-color: #555;
    }

    .content {
      width: 1000px;
      height: 1000px;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <!-- 内容 -->
    </div>
  </div>
</body>
</html>