[分享]css3怎么超过出现滚动条

在实际开发过程中，我们会遇到一个问题，当页面内容超过浏览器窗口的大小时，会自动出现滚动条。有时候，我们的设计需要隐藏滚动条，但是又不能影响用户的使用体验。那么这时候该怎么办呢？这篇文章将介绍如何使用...

在实际开发过程中，我们会遇到一个问题，当页面内容超过浏览器窗口的大小时，会自动出现滚动条。有时候，我们的设计需要隐藏滚动条，但是又不能影响用户的使用体验。那么这时候该怎么办呢？这篇文章将介绍如何使用CSS3来超出出现滚动条。
首先，我们可以使用`overflow`属性来控制元素的内容超过容器的部分如何处理。在CSS中，`overflow`有四个属性值可以使用，分别是`visible`、`hidden`、`scroll`和`auto`。其中，`visible`表示默认，不会裁剪元素的内容，超出部分会显示在容器之外。`hidden`表示不显示容器内的内容，超出部分会被隐藏起来。`scroll`表示元素不会自动裁剪内容，但会出现滚动条来让用户浏览超出部分的内容。`auto`表示元素会自动检测内容是否超出容器，如果超出则出现滚动条，如果没有则不会出现。
接下来，我们可以使用CSS3的`::-webkit-scrollbar`伪类去掉滚动条。该伪类可以针对Webkit内核的浏览器进行样式定制。使用该伪类时，需要用到以下属性：
- `width`：滚动条的宽度 - `height`：滚动条的高度 - `background-color`：滚动条的背景颜色 - `border-radius`：滚动条的圆角半径 - `scrollbar-thumb`：滚动条拖动滑块的样式 - `scrollbar-track`：滚动条轨道的样式
具体用法如下：

 ::-webkit-scrollbar {
      width: 6px;  /* 滚动条宽度 */
      background-color: #f5f5f5;  /* 背景颜色 */
      border-radius: 3px;  /* 圆角半径 */
    }
<br>
    ::-webkit-scrollbar-thumb {
      background-color: #c1c1c1;  /* 滑块的颜色 */
      border-radius: 3px;  /* 圆角半径 */
    }
<br>
    ::-webkit-scrollbar-track {
      background-color: #f5f5f5;  /* 轨道的颜色 */
      border-radius: 3px;  /* 圆角半径 */
    } 

通过上述代码，我们可以将滚动条的宽度设为6px，滑块的颜色设为#c1c1c1，轨道的颜色设为#f5f5f5，同时圆角半径设为3px。
最后，我们需要在容器中添加`-webkit-overflow-scrolling: touch;`属性，该属性是用于移动端Webkit内核的浏览器，可以使容器滑动更加流畅。
总结：使用CSS3来超出出现滚动条，可以通过`overflow`属性来控制元素内容超过容器的部分如何处理，通过`::-webkit-scrollbar`伪类去掉滚动条，再通过`-webkit-overflow-scrolling`属性来让容器滑动更加流畅。