uniapp scroll-view 滚动可以使用，但是显示不了滚动条

坚定信念，勇往无前

已于 2024-12-18 11:46:45 修改

阅读量657

点赞数 8

分类专栏： vue 文章标签： java 前端服务器

于 2024-12-18 11:46:28 首次发布

本文链接：https://blog.youkuaiyun.com/g470641382/article/details/144557489

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

一.问题：scroll-view可以滚动，但是不显示滚动条


<scroll-view style="height: 500rpx;padding-bottom: 15rpx;"  show-scrollbar="true" scroll-y="true" >
</scroll-view>

二。原因：被::-webkit-scrollbar这个样式影响

三.解决

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

</style>