zoukankan      html  css  js  c++  java
  • 小程序隐藏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;
     }
  • 相关阅读:
    jsonrpc
    第十章:多线程
    第九章:IO流
    第八章:集合
    第七章:常用类
    第六章:异常机制
    第四章:数组
    第三章:流程控制语句
    第二章:数据类型和运算符
    第五章:面向对象4
  • 原文地址:https://www.cnblogs.com/EasyLive2006/p/12877663.html
Copyright © 2011-2022 走看看