css怎么让滚动轴看不见

1. 普通滚动条

我们知道在网页中，如果内容区域高度不够，就会出现纵向滚动条。一般情况下，这个滚动条会一直显示在网页中，如果你想去掉这个滚动条，可以使用CSS中的overflow: hidden属性。这个属性会将滚动条隐藏，这样用户就不能通过滚动条来滚动页面了。

/* 隐藏滚动条 */
.element {
  overflow: hidden;
}

不过需要注意的是，这样会使得用户无法通过滚动条来滚动页面。如果你的内容区域高度不够，建议还是保留滚动条。

2. 自定义滚动条

可以通过CSS来自定义滚动条，让页面看起来更加美观。需要使用::-webkit-scrollbar和::-webkit-scrollbar-thumb伪元素来实现。

首先，我们可以用::-webkit-scrollbar来设置整个滚动条的样式，如下：

::-webkit-scrollbar {
  width: 8px;  /* 设置滚动条宽度 */
  height: 8px; /* 设置滚动条高度 */
}

接下来，我们用::-webkit-scrollbar-thumb来设置滚动条滑块（也就是滚动条上可以拖动的那个小块）的样式。比如我们可以设置滑块为圆角矩形，并且设置滑块的背景色为#999，如下：

::-webkit-scrollbar-thumb {
  border-radius: 5px; /* 设置滑块为圆角矩形 */
  background-color: #999; /* 设置滑块背景色为#999 */
}

如果你想要设置滚动条的轨道颜色，可以使用::-webkit-scrollbar-track伪元素。同样的，如果你想要改变滑块的大小，可以使用::-webkit-scrollbar-thumb的width和height属性来设置。

/* 设置滚动条轨道颜色 */
::-webkit-scrollbar-track {
  background-color: #eee;
}
/* 设置滑块大小 */
::-webkit-scrollbar-thumb {
  width: 50px;
  height: 50px;
}

3. 完全隐藏滚动条

上面提到的方法虽然可以让滚动条看起来更美观，但是依然会占据页面的一些空间。如果你想完全隐藏滚动条，可以使用scrollbar-width属性来实现。这个属性目前只有FireFox支持。

/* 隐藏滚动条 */
.element {
  scrollbar-width: none;
}

4. 只隐藏横向滚动条或纵向滚动条

有时候我们只需要隐藏横向滚动条或者纵向滚动条而不是全部隐藏，可以使用overflow-x或者overflow-y属性来实现。比如，我们只想隐藏纵向滚动条：

/* 隐藏纵向滚动条 */
.element {
  overflow-y: hidden;
}

同理，如果你只想隐藏横向滚动条，可以使用overflow-x: hidden;。

小结

overflow: hidden可以完全隐藏滚动条，但是用户无法通过滚动条来滚动页面。

使用::-webkit-scrollbar和::-webkit-scrollbar-thumb伪元素可以自定义滚动条样式。

使用scrollbar-width: none;可以完全隐藏滚动条，但是目前只有FireFox支持。

使用overflow-x和overflow-y可以只隐藏横向滚动条或纵向滚动条。