解决H5在移动端overflow:scroll滚动条默认不显示和滚动后消失的问题

OnwardAndUpward

已于 2022-05-17 14:36:51 修改

阅读量7.4k

点赞数 3

文章标签： css css3 html

于 2022-05-17 14:00:25 首次发布

本文链接：https://blog.csdn.net/julynight/article/details/124820165

版权

今天在工作中，遇到一个关于overflow在移动端视图调试滚动的问题，我在使用了overflow:scroll进行滚动时，滚动后滚动条自动消失了，需求是需要保留让它一直都在，下面的代码意思是重新设置滚动条的样式

        .wf-detailScroll{
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;
		}
		.wf-detailScroll::-webkit-scrollbar-track-piece {
			background-color: rgba(0, 0, 0, 0);
			border-left: 1px solid rgba(0, 0, 0, 0);
		}
		  .wf-detailScroll::-webkit-scrollbar {
			width: 5px;
			height: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		  }
		  .wf-detailScroll::-webkit-scrollbar-thumb {
			background-color: rgba(191, 191, 191, 191);
			background-clip: padding-box;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			min-height: 28px;
		  }
		  .wf-detailScroll::-webkit-scrollbar-thumb:hover {
			background-color: rgba(0, 0, 0, 0.5);
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		  }