CSS隐藏滚动条

一、CSS隐藏滚动条样式

CSS隐藏滚动条需要一些CSS样式。来隐藏默认的滚动条并为自定义滚动条留下空间。

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

其中，.example应该替换为你想要隐藏滚动条的元素的类或ID。

这两个CSS样式都做了同样的事情-隐藏了滚动条。然而，不同的浏览器需要不同的样式来实现这个目标。所以我们首先要使用WebKit（Chrome，Safari和Opera）样式来隐藏滚动条，然后使用IE，Edge和Firefox的样式来实现同样的隐藏效果。

二、CSS隐藏滚动条不生效

在某些情况下，CSS隐藏滚动条可能不会生效。一个常见的原因是CSS样式被其它样式覆盖了。下面是一些你可能会面对的问题。

1. 父级元素被绝对定位

如果你的.example元素存在于绝对定位的父级元素内部，那么它的滚动条表现可能会受到影响。如果你的父级元素已被绝对定位，尝试把它转换成相对定位或固定定位。

2. 为滚动条的子元素设置样式

如果你为.example元素的子元素（如内容区域）设置了样式，那么这些样式可能会重写你的隐藏滚动条样式。你可以通过在子元素中添加CSS样式，如下所示：

.example .content::-webkit-scrollbar {
  display: none;
}

3. 其它样式优先级高于隐藏滚动条样式

如果你已经使用了!important声明修改滚动条的样式，那么CSS隐藏滚动条可能会失效。你可以把!important声明从其它样式中删除，这样 CSS隐藏滚动条会正常工作。

三、CSS隐藏滚动条可以滚动

在隐藏滚动条的同时，滚动仍然必须工作。下面是一些CSS样式，可以确保你的隐藏滚动条在滚动时正常工作。

/* Width */
.example::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* Track */
.example::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Handle */
.example::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

/* Hover effect */
.example::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这段CSS代码会为你的隐藏滚动条创建扁平式的，灰色的滚动条。你可以把以下样式拆分成如下几个部分：

::-webkit-scrollbar 确定滚动条的宽度和高度。
::-webkit-scrollbar-track这个滚动条轨道的颜色。
::-webkit-scrollbar-thumb滚动条拖动块的颜色和形状。
::-webkit-scrollbar-thumb:hover鼠标悬停在滚动条拖动块上时的颜色。

四、CSS隐藏滚动条自动判断移动方向

默认情况下，CSS隐藏滚动条会在水平和垂直方向上隐藏滚动条。然而，这可能会导致用户在垂直和水平方向上同时进行拖动。下面是一些CSS样式，可以确保你的隐藏滚动条按照移动方向正常工作。

/* Auto-hide scrollbars */
.example {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-scrollbar-width: none; /* Safari and Chrome */
}

/* Only show vertical scrollbar when necessary */
.example::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.example::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

这段CSS代码解决了一些空间问题。它会在必要时自动显示隐藏滚动条，以及只在垂直方向上显示滚动条。

五、CSS滚动条隐藏

除了隐藏滚动条，你也可以设置滚动条是透明的。

/* Hide the scrollbar, but still scrollable */
.example::-webkit-scrollbar {
  background-color: transparent;
}

.example::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 999px;
}

这样设置可以让滚动条在必要时虽然不会被隐藏，但它是透明的，不会影响您的视觉效果。

六、CSS滚动条设置

你也可以定制滚动条的外观，以匹配你网页的主题。

.example::-webkit-scrollbar {
  width: 12px;
}

.example::-webkit-scrollbar-track {
  background-color: #d8d8d8;
  border-radius: 10px;
}

.example::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 10px;
  border: 3px solid #fff;
}

.example::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

这段代码将创建12像素宽的滚动条并使用灰色的轨道，浅灰色的拖动块，以及白色的描边。

七、CSS滚动条隐藏底部

有时滚动条出现在底部会显得丑陋，因为用户需要上下滑动。但是，HTML和CSS提供了隐藏底部的滚动条的解决方案。

/* Hide the scrollbar and prevent scrollbars from appearing */
.example {
  overflow-y: scroll;
  overflow-x: hidden;
}

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

这段代码对于隐藏滚动条非常好。然而，记得添加overflow-x: hidden;禁用水平滚动。

八、CSS超出滚动时隐藏滚动条选取

在某些情况下，只想在溢出内容时才显示滚动条。

.example {
  height: 100px;
  overflow-y: scroll;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

这段css代码将在用户拉下内容时才显示滚动条，而不是一直存在。通过这种方式，用户可以获得更多的屏幕空间。

结语

本文全面地介绍了如何使用CSS隐藏滚动条。通过灵活利用本文所介绍的CSS样式，你可以轻松地隐藏或显示滚动条，根据你的需要自定义你自己的滚动条。祝你好运。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/303273.html