[UNIAPP系列] IOS端取消橡皮筋回弹效果

文章讲述了在微信小程序中使用scroll-view实现固定列阴影时,如何通过设置`overscroll-behavior`属性为`none`来避免iOS端的橡皮筋回弹效果和滚动回调延迟。提供了相应的代码示例以确保滚动事件正常触发。

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

项目场景:

scroll-view作为视口实现固定列的阴影


问题描述

在编写Table组件的时候使用到了scroll-view作为视口实现固定列的阴影时发现,IOS端存在橡皮筋回弹的效果导致了scroll回调晚触发的问题。


原因分析:

overscroll-behavior CSS 属性是用来控制滚动容器(如<div>等)在到达滚动边界时的表现。当你滚动页面到顶部或底部时,某些浏览器(特别是移动端浏览器)会显示橡皮筋效果,甚至在滚动到顶部时可以触发下拉刷新,在滚动到底部时可以继续向下滑动去导航到其他的历史页面。

overscroll-behavior 属性的值可以是以下之一:

auto: 默认行为,允许橡皮筋效果(对应平台上的默认滚动行为)。
contain: 防止滚动链到滚动容器的祖先元素,但是允许当前元素的橡皮筋效果。
none: 取消当前滚动容器的橡皮筋效果以及滚动链行为。


解决方案:

<style lang="scss" scoped>
/deep/ .uni-scroll-view,.uni-scroll-view-content{
	overscroll-behavior: none;
}
/deep/ .uni-scroll-view-content{
overscroll-behavior: none;
}
</style>
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

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

    抵扣说明:

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

    余额充值