overflow：auto出现滚动效果不显示滚动条

冬至z

已于 2025-04-28 15:03:11 修改

阅读量6.7k

点赞数 2

分类专栏：解决问题 css 文章标签： css3 css html

于 2022-05-11 14:09:56 首次发布

本文链接：https://blog.csdn.net/zkx529/article/details/124708713

版权

解决问题同时被 2 个专栏收录

12 篇文章

订阅专栏

css

4 篇文章

订阅专栏

本文讲述了在设置了`overflow: auto`导致子元素超出父元素时，遇到滚动条不显示的问题。原因在于全局设置了滚动条宽度为0。通过详细解释样式覆盖和解决办法，介绍了如何完整设置`::-webkit-scrollbar`样式来重现滚动条并调整其外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

overflow：auto 子元素超过父元素高度或者宽度时会出现滚动条（需要设置高度和宽度），当我这么设置之后出现了滚动效果却没有滚动条。

问题原因

全局写了滚动条宽度为0。

::-webkit-scrollbar : {width:0}

当我用样式覆盖后还是没有出现。

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

可能原因是样式没有写完整。

解决办法

将样式写全

.printLogFather::-webkit-scrollbar {
  width: 8px;
  height: 6px;
  opacity: 0.4;
}
.printLogFather::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 8px;
  opacity: 0.4;
}
.printLogFather::-webkit-scrollbar-track-piece {
  width: 4px;
}
.printLogFather::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: gray;
  opacity: 0.4;
}