微信小程序:scroll-view安卓机隐藏横向滚动条

本文探讨微信小程序中scroll-view组件在iOS与Android平台显示差异,尤其关注Android平台滚动条的隐藏方法。通过实践,发现直接使用CSS伪类无法达到目的,而自定义CSS结合特定布局属性(如overflow:hidden;white-space:nowrap;)可有效隐藏滚动条,适用于小程序Android端。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微信小程序使用scroll-view横向布局在iOS和Android上有不同的展示,iOS无滚动条,Android有滚动条,按照产品需求需要隐藏横向滚动条。
在网上搜索一些,说是以下几段代码可以实现,代码如下:

使用组件的伪类。亲测,在小程序端无效

/隐藏滚动条/
::-webkit-scrollbar{
      width: 0;
      height: 0;
      color: transparent;
}
/隐藏滚动条/
::-webkit-scrollbar{
    display: none;
}

试用了伪类失效,只能自己写css了,亲测,在小程序Android有效。包裹 scroll-view 的大盒子有明确的宽和加上样式–> overflow:hidden;white-space:nowrap;
代码如下:

     <view class="scroll-box">
         <scroll-view class="scroll-H" scroll-x="true" >
             <view class="scroll-H-list">
                <view class="scroll-H-item" wx:for="{{box_list}}" wx:key="index">
                  {{item.color}}
                </view>
            </view>
           </scroll-view>
      </view>

.scroll-box {
  width: 750rpx;
  height: 200rpx;
  overflow: hidden;
  font-size: 28rpx;
  color: #EEEEEE;
  line-height: 42rpx;
}

.scroll-H {
  width: 100%;
  white-space: nowrap;
}

.scroll-H-list {
  padding-bottom: 60rpx; 
}

.scroll-H-item {
  display: inline-block;
  width: 300rpx;
  height: 200rpx;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值