使用overflow-y：滚动但滚动条继续显示

在web开发中，overflow-y: scroll 可以实现在元素垂直方向上出现滚动条，如果内容超出元素高度，则用户可以通过滚动条查看剩余的内容。但是在某些浏览器或操作系统中，滚动条会在滚动结束后自动消失，这对于用户体验来说并不友好。下面介绍如何通过 CSS 实现垂直滚动条一直显示的效果。

使用::-webkit-scrollbar伪元素

在Webkit浏览器和一些移动端浏览器中，可以通过伪元素::-webkit-scrollbar来定制滚动条的显示效果。例如下面的 CSS 代码可以将滚动条的宽度设置为5px，同时将滚动条的背景色设为 #F5F5F5，滚动条的前景色设为 #AAA：

::-webkit-scrollbar{
  width: 5px;
}

::-webkit-scrollbar-track{
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb{
  background-color: #AAA;
}

但是在某些Webkit浏览器或操作系统中，滚动条在滚动结束后也会自动消失，这时需要使用以下样式来实现滚动条一直显示的效果：

::-webkit-scrollbar{
  width: 5px;
}

::-webkit-scrollbar-track{
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb{
  background-color: #AAA;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}

::-webkit-scrollbar-thumb:active {
  background-color: #555;
}

使用overflow-y和隐藏父容器滚动条

另一种实现滚动条一直显示的方法是将 overflow-y:scroll 应用到父元素上，并将子元素的宽度设置为父元素的宽度加上滚动条的宽度。这样就可以通过隐藏父容器的滚动条来实现子容器的滚动。例如下面的 HTML 和 CSS 代码可以将一个<div>元素的高度设置为100px，当内容超出高度时会在垂直方向上出现滚动条，并将滚动条的宽度设置为10px，同时将滚动条的背景色设为 #F5F5F5，滚动条的前景色设为 #AAA。

.parent {
  overflow-y: scroll;
  height: 100px;
}

.child {
  width: calc(100% + 10px);
}

.parent::-webkit-scrollbar{
  width: 10px;
}

.parent::-webkit-scrollbar-track{
  background-color: #F5F5F5;
}

.parent::-webkit-scrollbar-thumb{
  background-color: #AAA;
}

.parent::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}

.parent::-webkit-scrollbar-thumb:active {
  background-color: #555;
}

需要注意的是，如果子元素的宽度不是100%加上滚动条宽度，那么会出现水平方向上的滚动条，这对于元素宽度较小时可能会影响用户体验。