uniapp scroll-view 隐藏滚动条

行云流水626

已于 2023-06-30 13:08:49 修改

阅读量1.3k

点赞数 1

文章标签： uni-app html 前端 css

于 2023-05-17 14:47:37 首次发布

本文链接：https://blog.youkuaiyun.com/Lsir1998/article/details/130725758

版权

这段代码展示了如何在不同平台（微信小程序、APP-PLUS、H5）上隐藏滚动条。对于全局隐藏，可以在App.vue中应用；对于局部隐藏，可直接在对应页面引入。通过设置webkit-scrollbar的样式，滚动条被设置为不可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果是想全局隐藏的话，可以放在App.vue中，如果是局部则在对应的页面中引入使用即可

	/* #ifdef MP-WEIXIN || APP-PLUS */
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		  }
	/* #endif */
		
	/* #ifdef H5 */
		uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		}
	/* #endif */