CSS H5 移动端开发 overflow: scroll 不显示滚动条问题（ios 暗黑模式不生效）

在做H5的开发时，需求要求显示滚动条，但是加上overflow: scroll;不起作用，在电脑上调试是没有问题的，但是在真机上不显示滚动条。于是采用手动添加的方式解决，但是这种方式在IOS的暗黑模式下是不生效的，因为我的这个页面背景是白色，而在IOS的暗黑模式下，滚动条也是白色，只有深色背景可以看见滚动条。.article-content {max-height: 6.4rem /* 480/

RosaChampagne

6862人浏览 · 2020-05-26 14:52:25

RosaChampagne · 2020-05-26 14:52:25 发布

在做H5的开发时，需求要求显示滚动条，但是加上overflow: scroll;不起作用，在电脑上调试是没有问题的，但是在真机上不显示滚动条。
于是采用手动添加的方式解决，但是这种方式在IOS的暗黑模式下是不生效的，因为我的这个页面背景是白色，而在IOS的暗黑模式下，滚动条也是白色，只有深色背景可以看见滚动条。

<div class="article-content" v-html="articleContent"></div>


.article-content {
  max-height: 6.4rem /* 480/75 */;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.article-content::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-left: .013333rem solid rgba(0, 0, 0, 0);
}
.article-content::-webkit-scrollbar {
  width: .04rem;
  height: .173333rem;
  -webkit-border-radius: .066667rem;
  -moz-border-radius: .066667rem;
  border-radius: .066667rem;
}
.article-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  -webkit-border-radius: .066667rem;
  -moz-border-radius: .066667rem;
  border-radius: .066667rem;
  min-height: .373333rem;
}
.article-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: .066667rem;
  -moz-border-radius: .066667rem;
  border-radius: .066667rem;
}