uniapp之屏幕右侧出现滚动条去掉、隐藏、删除【好用！】

第一种

问题

解决

在最外层view上加上class=“content”;输入以下样式。注意：两个都必须存在在生效。

.content {
	 /* 跟屏幕高度一样高,不管view中有没有内容,都撑开屏幕高的高度 */
	height: 100vh; 
	overflow: auto;
}
.content::-webkit-scrollbar {
	/* ::-webkit-scrollbar webkit的伪元素，滚动条 
		伪元素只能有一个，不能多个同时出现，且只能放在最后面	
		两个冒号是css3的样式，主要与伪类区分。
	*/
	width: 0;
	height: 0;
	background-color: transparent;
}

第二种

<view class="oppo-box">
</view>

/* 下面是滚动条样式	去除 */
	.oppo-box {
		box-sizing: border-box !important;
		overflow-y: auto !important;
	}


	/deep/ .oppo-box::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important;
		background-color: transparent !important;
	}

	.oppo-box ::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	
	.oppo-box::-webkit-scrollbar {
		width: 0px !important;
	}
	
	/deep/ .oppo-box::-webkit-scrollbar-track {
		/* background-color: #fff; */
		background: transparent;
	}
	
	/deep/ .oppo-box::-webkit-scrollbar-thumb {
		/* background-color: #fff; */
		background: transparent;
	}

第三种

去除滚动条在App和微信小程序上面好用~

使用页面

<view class="oppo-box">
</view>

.oppo-box {{
	width: 100vw !important;
	height: 100vh !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

App.vue 全局css

<style>
	/*每个页面公共css */
	body,
	html {
		overflow-x: hidden;
	}
	body::-webkit-scrollbar {
		display: none;
	}
</style>

第四种

去除滚动条在H5上面好用~

<view class="oppo-box">
</view>

.oppo-box {
		height: 100vh !important;
		box-sizing: border-box !important;
		overflow-y: 1rpx !important;
	}

	.oppo-box::-webkit-scrollbar {
		width: 0rpx !important
	}

	.oppo-box::-webkit-scrollbar-track {
		background-color: #FFF !important;
	}

	.oppo-box::-webkit-scrollbar-thumb {
		background-color: #FFF !important;
	}

大佬地址

给大佬地址贴上：https://blog.csdn.net/qq_31676483/article/details/123345824

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！