收藏
回答

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

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

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

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

14 个回答

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

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

    2018-04-24
    有用 8
    回复 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
      13
      回复
    • 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
    有用 8
    回复 8
    • 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
      9
      回复
    • 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
      回复
    查看更多(3)
  • 吴宗恩
    吴宗恩
    2021-02-04

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


    2021-02-04
    有用 5
    回复 3
    • asuka
      asuka
      2021-03-16
      试了下,没效果
      2021-03-16
      回复
    • 都广野
      都广野
      2021-05-06
      试了一下,居然可以,谢谢啦
      2021-05-06
      1
      回复
    • Blue🌂
      Blue🌂
      2021-05-12
      试了一下,居然可以,谢谢啦
      2021-05-12
      回复
  • 瞌睡怪🌕
    瞌睡怪🌕
    2019-07-08

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

    ```

    .container{

        width:900rpx;

        height:100vh;

        overflow-x:hidden;

    }

    ```

    2019-07-08
    有用 3
    回复 2
    • 在路上的人
      在路上的人
      2021-01-10
      简单实用
      2021-01-10
      回复
    • 十
      2021-04-08
      +1 ,我宽度用的width: calc(100% + 6rpx);
      2021-04-08
      回复
  • 东东章
    东东章
    2021-09-06
    .类选择器 /deep/ ::-webkit-scrollbar {
        display: none;
        width0 !important;
        height0 !important;
        -webkit-appearance: none;
        background: transparent;
    }
    
    
    2021-09-06
    有用 2
    回复 2
    • 宋玉
      宋玉
      2021-09-21
      这个方法有效
      2021-09-21
      回复
    • Zan^Z
      Zan^Z
      2021-11-22回复宋玉
      为什么我用这个方法还是不行啊
      2021-11-22
      回复
  • York Wong
    York Wong
    06-01
    增加下面的属性给你的scroll-view
    :enhanced="true"
    :show-scrollbar="false"
    错误用法:
    enhanced="true"
    show-scrollbar="false"
    
    
    06-01
    有用 1
    回复
  • 爱吃西红柿
    爱吃西红柿
    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
    • @🦜
      @🦜
      03-10
      官方的意思是给scroll-view一个固定的超出视屏的宽度,然后设置右侧的pdding为超出的宽度。。。
      03-10
      回复
  • 小白是鱼骨头啊丶
    小白是鱼骨头啊丶
    2019-11-12

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

    2019-11-12
    有用
    回复

正在加载...

登录 后发表内容