How to hide the scroll bar of scroll view in uniapp

1. We are using uniapp Of scroll-view Component time , It often appears scrollbars , As shown in the figure below .

 

2. So how can we solve it ？ First, we find the of the project App.vue File and then style Add the following code to the label , thus , The properties of different tags can be controlled according to different platforms .

<style>
	/* Every page is public css */
	/*  Resolve applets and app Scroll bar problem  */
	/* #ifdef MP-WEIXIN || APP-PLUS */
		::-webkit-scrollbar {
		    display: none;
		    width: 0 !important;
		    height: 0 !important;
		    -webkit-appearance: none;
		    background: transparent;
		    color: transparent;
		  }
	/* #endif */
	
	/*  solve H5  The problem of  */
	/* #ifdef H5 */
	    uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
	    	/*  Hide scroll bar , But it still has the function of scrolling  */
			display: none;
		    width: 0 !important;
		    height: 0 !important;
		    -webkit-appearance: none;
		    background: transparent;
		    color: transparent;
	    }
	/* #endif */
</style>

3. We can still do that App.vue Of style Internal and external links base.css This method can control all scroll bars .

<style>
	/* Every page is public css */
	@import url("./src/assets/css/base.css");
	
</style>

4.base.css The code is as follows

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