收藏
回答

微信小程序如何隐藏scroll-view滚动条

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug scroll-view 客户端 iOS 6.6.5 2.0.0
::-webkit-scrollbar {
 
width: 0;
 
height: 0;
 
color: transparent;
 
}

scroll-view 使用上述代码 无法隐藏滚动条,ios 上 有的时候有,有的时候没有

回答关注问题邀请回答
收藏

12 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2018-04-24

    尝试子元素可滚动,宽度比视窗宽度略宽,右边有 padding。然后父元素限制横向滚动,宽度为视窗宽度,overflow hidden。

    2018-04-24
    有用 7
    回复 19
    • 远山
      远山
      2018-07-12

      不好意思没看懂,能不能再说说

      2018-07-12
      回复
    • 贺礼
      贺礼
      2018-09-21

      这种解决方式太野了吧

      2018-09-21
      回复
    • 贺礼
      贺礼
      2018-09-21

      最好的解决办法就是不用<scroll-view>,用<view>代替,设置 overflow-y: auto,滚动条用下面的CSS去掉,兼容ios/android

      ::-webkit-scrollbar {

        display: none;
        width: 0;
        height: 0;
        color: transparent;
      }


      2018-09-21
      12
      回复
    • hehe
      hehe
      2018-11-19回复贺礼

      慎重用overflow-y: auto

      2018-11-19
      回复
    • Yrobot
      Yrobot
      2019-04-18

      认真的吗?????

      2019-04-18
      回复
    查看更多(14)
  • 北京比优比优科技
    北京比优比优科技
    2020-04-10

    把这个样式扔到全局样式中:app.wxss中:

    ::-webkit-scrollbar {

      display: none;

    }

    然后重要的细节来了:

     外层容器的高度要使用明确的值:100%或者680px这种值,如果使用auto 隐藏滚动条不起作用。


    2020-04-10
    有用 7
    回复 7
    • luv.sic
      luv.sic
      2020-05-17
      大佬这样试了还是不行呢
      2020-05-17
      1
      回复
    • 余亦然也
      余亦然也
      2020-07-14回复luv.sic
      ::-webkit-scrollbar {


        display:none;
        width:0;
        height:0;
        color:transparent;
      }
      2020-07-14
      6
      回复
    • CHEN
      CHEN
      2020-08-10回复余亦然也
      可以了,谢谢
      2020-08-10
      回复
    • William
      William
      2020-08-14回复余亦然也
      这个可以
      2020-08-14
      回复
    • Charlie
      Charlie
      2020-11-04回复余亦然也
      这个在android上不行
      2020-11-04
      回复
    查看更多(2)
  • 吴宗恩
    吴宗恩
    02-04

    scroll-view(scroll-x="true", :show-scrollbar="false" :enhanced="true")


    02-04
    有用 3
    回复 3
    • asuka
      asuka
      03-16
      试了下,没效果
      03-16
      回复
    • 谁让我们没有钱
      谁让我们没有钱
      05-06
      试了一下,居然可以,谢谢啦
      05-06
      1
      回复
    • Blue🌂
      Blue🌂
      05-12
      试了一下,居然可以,谢谢啦
      05-12
      回复
  • 瞌睡怪🐼
    瞌睡怪🐼
    2019-07-08

    如果是页面的话,可以给容器定高,同时给大于页面宽的width

    ```

    .container{

        width:900rpx;

        height:100vh;

        overflow-x:hidden;

    }

    ```

    2019-07-08
    有用 3
    回复 2
    • 在路上的人
      在路上的人
      01-10
      简单实用
      01-10
      回复
    • 十
      04-08
      +1 ,我宽度用的width: calc(100% + 6rpx);
      04-08
      回复
  • 东东章
    东东章
    09-06
    .类选择器 /deep/ ::-webkit-scrollbar {
        display: none;
        width0 !important;
        height0 !important;
        -webkit-appearance: none;
        background: transparent;
    }
    
    
    09-06
    有用 1
    回复 1
    • 宋玉
      宋玉
      09-21
      这个方法有效
      09-21
      回复
  • 岁月
    岁月
    2020-07-23

    使用了最上面官方的方法 解决了

    2020-07-23
    有用
    回复 1
    • _NN
      _NN
      2020-10-16
      你好,请问具体是怎么解决的
      2020-10-16
      回复
  • 轮回
    轮回
    2019-11-28

    怎么解决,指导一下

    2019-11-28
    有用
    回复
  • 小白是鱼骨头啊丶
    小白是鱼骨头啊丶
    2019-11-12

    上面把宽拉大再禁止左右滑动,确实可行,但还是会有点问题,不能完美解决

    2019-11-12
    有用
    回复
  • 在知识的海洋里溺水身亡的小不懂
    在知识的海洋里溺水身亡的小不懂
    2019-01-28

    加了这段代码以后,所有有关 scroll-view 的组件样式全乱了,糟心呐

    2019-01-28
    有用
    回复
  • 远山
    远山
    2018-07-12

    请问怎么弄的,没看懂

    2018-07-12
    有用
    回复 3
    • Edison煜
      Edison煜
      2018-07-23

      就是说你最外层的<view>宽度比手机窗口宽度要大一点(加个padding-left),多出来的这一点宽度用来放滚动条,所以就起到了隐藏的作用,再设置一个不可左右滑动就可以了。

      2018-07-23
      2
      回复
    • 见相非相
      见相非相
      2019-08-28回复Edison煜
      能否上一段示意代码?
      2019-08-28
      回复
    • xuyue
      xuyue
      2020-08-31回复Edison煜
      我就是要能够左右滑动,然后隐藏下部的滚动条
      2020-08-31
      回复

正在加载...

登录 后发表内容