公告列表
公告列表
收藏
回答

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

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

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

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

15 个回答

  • 比优Biu~
    比优Biu~
    2020-04-10

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

    ::-webkit-scrollbar {

      display: none;

    }

    然后重要的细节来了：

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


    2020-04-10
    有用 9
    回复 8
    • 雨晴儿
      雨晴儿
      2020-05-17
      大佬这样试了还是不行呢
      2020-05-17
      赞 1
      回复
    • 余亦然也
      余亦然也
      2020-07-14回复雨晴儿
      ::-webkit-scrollbar {


        display:none;
        width:0;
        height:0;
        color:transparent;
      }
      2020-07-14
      赞 11
      回复
    • 小太阳
      小太阳
      2020-08-10回复余亦然也
      可以了，谢谢
      2020-08-10
      赞
      回复
    • 周伟林
      周伟林
      2020-08-14回复余亦然也
      这个可以
      2020-08-14
      赞
      回复
    • Charlie
      Charlie
      2020-11-04回复余亦然也
      这个在android上不行
      2020-11-04
      赞
      回复
    查看更多(3)
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-04-24

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

    2018-04-24
    有用 8
    回复 20
    • 远山
      远山
      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
      赞 13
      回复
    • 逻各马
      逻各马
      2018-11-19回复

      慎重用overflow-y: auto

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

      认真的吗？？？？？

      2019-04-18
      赞
      回复
    查看更多(15)
  • 吴宗恩
    吴宗恩
    2021-02-04

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


    2021-02-04
    有用 6
    回复 8
    • webDevelopers
      webDevelopers
      2021-03-16
      试了下，没效果
      2021-03-16
      赞
      回复
    • 2021-05-06
      试了一下，居然可以，谢谢啦
      2021-05-06
      赞 1
      回复
    • Blue🌂
      Blue🌂
      2021-05-12
      试了一下，居然可以，谢谢啦
      2021-05-12
      赞
      回复
    • 木有粗面
      木有粗面
      2022-12-15
      试了一下，居然可以，谢谢啦
      2022-12-15
      赞
      回复
    • 朱少凌
      朱少凌
      2023-02-16
      show-scrollbar="{{false}}" 要加括号
      2023-02-16
      赞 4
      回复
    查看更多(3)
  • York Wong
    York Wong
    2022-06-01
    增加下面的属性给你的scroll-view
:enhanced="true"
:show-scrollbar="false"
错误用法：
enhanced="true"
show-scrollbar="false"
    2022-06-01
    有用 4
    回复 2
    • 穆飞
      穆飞
      2022-07-18
      你这个是vue的写法，万一哪天官方又抽风了不支持了呢？ 正确的写法如下
      2022-07-18
      赞 3
      回复
    • 彭世瑜
      彭世瑜
      2023-04-18
      uni-app可以使用，ios本来没有，安卓机有，加了属性就没有了
      2023-04-18
      赞
      回复
  • 瞌睡怪
    瞌睡怪
    2019-07-08

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

    ```

    .container{

        width:900rpx;

        height:100vh；

        overflow-x:hidden;

    }

    ```

    2019-07-08
    有用 4
    回复 2
    • 在路上的人
      在路上的人
      2021-01-10
      简单实用
      2021-01-10
      赞
      回复
    • 十
      十
      2021-04-08
      +1 ,我宽度用的width: calc(100% + 6rpx);
      2021-04-08
      赞
      回复
  • 小辉
    小辉
    2022-08-16

    scroll-view ::-webkit-scrollbar {

      appearance: none;

      color: transparent;

      display: none;

      width: 0;

      height: 0;

    }

    2022-08-16
    有用 3
    回复 3
    • 彼时经年°
      彼时经年°
      01-12
      大佬膜拜,这么多人就你的可以游泳
      01-12
      赞
      回复
    • 彼时经年°
      彼时经年°
      01-12回复彼时经年°
      哎,困扰了一星期,可算找到救星咯
      01-12
      赞
      回复
    • 炳材
      炳材
      01-24
      大佬牛逼，问题解决了
      01-24
      赞
      回复
  • 东东章
    东东章
    2021-09-06
    .类选择器 /deep/ ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
}
    2021-09-06
    有用 3
    回复 2
    • 宋玉
      宋玉
      2021-09-21
      这个方法有效
      2021-09-21
      赞
      回复
    • Zan^Z
      Zan^Z
      2021-11-22回复宋玉
      为什么我用这个方法还是不行啊
      2021-11-22
      赞
      回复
  • 纸鸢
    纸鸢
    2021-11-25

    有些人是托吗？明明大部分不行的办法，在那，行行行，有用，云代码？这不扯淡~

    别用scroll-view，用view去做滚动，css原生的禁用滚动条样式

    ::-webkit-scrollbar{

    display: none;

    }

    设置下滚动条隐藏，这才是真正的可行办法，不过好像没看到小程序里面有修改dom的操作，之后对dom的修改操作不知道改如何实现。

    2021-11-25
    有用
    回复
  • 岁月
    岁月
    2020-07-23

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

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

    怎么解决，指导一下

    2019-11-28
    有用
    回复 1
    • 欢乐马
      欢乐马
      2022-03-10
      官方的意思是给scroll-view一个固定的超出视屏的宽度，然后设置右侧的pdding为超出的宽度。。。
      2022-03-10
      赞
      回复

正在加载...

请 登录 后发表内容
相关问题
相关文档