[CSS] 第1372天 如何使用CSS实现隐藏滚动条但内容可以滚动？

可以使用CSS的伪元素 ::-webkit-scrollbar 和 ::-webkit-scrollbar-track 以及 ::-webkit-scrollbar-thumb 来实现隐藏滚动条但内容可以滚动的效果，具体步骤如下：

将 ::-webkit-scrollbar 的宽度设置为0，这样就隐藏了滚动条。
将 ::-webkit-scrollbar-track 的背景色设置为和页面背景色一致，这样滚动条区域看起来就和页面背景一样了。
将 ::-webkit-scrollbar-thumb 的背景色设置为和需要滚动的内容一致，这样滚动条拖动区域看起来就和滚动的内容一样了。

具体的CSS代码如下：

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
}

/* 滚动条区域背景色 */
::-webkit-scrollbar-track {
  background-color: #f2f2f2;
}

/* 滚动条拖动区域背景色 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

在需要滚动的元素上，只需要添加以下CSS样式即可：

overflow: auto;

这样就可以实现隐藏滚动条但内容可以滚动的效果了。

更多题目

github.com/haizlin/fe-…