小程序scrollview隐藏滚动条（微信小程序隐藏滚动条的方法）

当小程序页面展示内容超过屏幕高度或宽度
  
  
  
  
  
  
  
  
  
 ，我们想要看到全部内容  
  
  
  
  
  
  
  
  
  ，这时候就必须用到页面滚动                    。可是
 


 


 


 


 


 


 


 


 


 

，我们发现滚动页面的滚动条特别的突兀和丑陋
 
 
 
 
 
 
 
 
 
，而且参考大部分的小程序都是将滚动条去掉了
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。那么   
   
   
   
   
   
   
   
   
   ，我们该怎么去掉滚动条呢？

当展示内容超过页面高度
 

 

 

 

 

 

 

 

 

 
，会触发page默认的滚动条


















。如下：

scroll-view

 

 

 

 

 

 

 

 

 

，隐藏滚动条的方法也很简单 
  
  
  
  
  
  
  
  
  
 。

我们可以在app.wxss（全局）或当前页面.wxss加入如下代码即可：

::-webkit-scrollbar {

  display: none;

  width: 0;

  height: 0;

  color: transparent;

}

注意：

scroll-view高度不要设置为相对高度                    ，如100%
  
  
  
  
  
  
  
  
  
 。否则
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，page页面的滚动条又会出现了！！！

可以这样做：

<scroll-view  scroll-y style="width: 100%; height: 100vh;"> </scroll-view>

如果仍然无效



















，减少height的值                             ，例如设为height:99vh
 


 


 


 


 


 


 


 


 


 
。scroll-view高度大于page高度仍会出现滚动条的 
 
 
 
 
 
 
 
 
 
。

父元素如page记得设置：

overflow: hidden;