小程序隐藏scroll-view滚动条的实现 - 转

以下两种方法都可以

/*隐藏滚动条*/

::-webkit-scrollbar{

  width: 0;
  
  height: 0;
  
  color: transparent;

}
/*隐藏滚动条*/

::-webkit-scrollbar{

  display: none;

}

如果不行,还有以下方法:

传送门

实现思路就是,在scroll-view外边再包一个容器,它的高度小于scroll-view的高度,这样就会截掉滚动条,达到隐藏了滚动条的效果。

// scss
.scroll-view-container { // 包裹scroll-view的容器
  height: $fakeScrollHeight;
  overflow: hidden; // 这个设置了就能截掉滚动条啦
  scroll-view {
   width: 100%;
   white-space: nowrap;
  }
 }

 .tab-container { // 我这里是用.tab-container来撑开scroll-view的高度,所以高度在它上面设置,加上padding,那么它就会比外层容器(.scroll-view-container)要高
  display: inline-block;
  width: 26%;
  height: $fakeScrollHeight;
  padding-bottom: $scrollBarHeight;
 }

 

posted @ 2020-05-12 17:50  KidYang  阅读(1766)  评论(0编辑  收藏  举报