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

今天在工作中，遇到一个关于overflow滚动的问题，我在使用了overflow:scroll进行滚动时，滚动后滚动条自动消失了，需求是需要保留让它一直都在，下面的代码意思是重新设置滚动条的样式.wf-detailScroll{overflow-x: scroll;-webkit-overflow-scrolling: touch;}.wf-detailScroll::-webkit-scroll

OnwardAndUpward

6483人浏览 · 2022-05-17 14:00:25

OnwardAndUpward · 2022-05-17 14:00:25 发布

今天在工作中，遇到一个关于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;
		  }