uniapp H5 滚动条/滚轮 不显示问题

621 阅读1分钟

这问题真的蠢,看代码找原因人都麻了......

原因

uniapp 和一些组件运行到了浏览器之后造成的,因为并不支持。
其实如果仔细看的到就能看到 这些 ::-webkit-scrollbar ::-webkit-scrollbar-thumb ::-webkit-scrollbar-track样式造成的问题。导致了滚动条不显示。

解决起来也不难,不想全局覆盖的话,那就在想需要这个样式的页面进行样式覆盖就好了,虽然这办法有点蠢,但是没办法,这是目前能用到的最优解。

解决

直接展示解决代码

          // 滚动条样式
		/deep/ ::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 4px !important;
			height: 3px !important;
			overflow: auto !important;
			background: #ccc !important;
			-webkit-appearance: auto !important;
			display: block;
		}
	
		/deep/ ::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 10px !important;
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
			background: #7b7979 !important;
		}
	
		/deep/ ::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
			// border-radius: 10px !important;
			background: #FFFFFF !important;
		}

tip:如果有人看不懂,可以私聊或者评论,看到会回。