小程序如何隐藏滚动条

本文介绍了如何在小程序中隐藏滚动条。当`:show-scrollbar="false"`属性不起作用时,可以使用CSS来隐藏`scroll-view`中的滚动条,但这种方法不适用于`view`标签。文章还提到了`scroll-view`配置的注意事项,包括对高度、样式的要求,以及在不同场景下的使用限制和性能问题。同时,建议在需要下拉刷新的情况下使用页面级别的滚动,而非`scroll-view`,以保证更好的性能。
摘要由CSDN通过智能技术生成

html(如下)

<!--纵向滚动: scroll-y , 横向滚动:scroll-x -->

<scroll-view style='height:500rpx'  scroll-x="true" :show-scrollbar="false" @scroll="scroll">
	<view class="scroll-view-item_H">A</view>
	<view class="scroll-view-item_H">B</view>
	<view class="scroll-view-item_H">C</view>
</scroll-view>

( 如果上面html中使用 :show-scrollbar="false" 属性不生效,可以通过下面css隐藏 -- 此css只能隐藏scroll-view中的滚动条,view标签中的无效) 

css(如下):

::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

(官方文档内容 - 2022.7.11日复制过来的,最新文档可去官网看)

scroll-view配置

属性说明

<
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值