overscroll-behavior-办理H5在ios上过分滚动的默认活动

[复制链接]
发表于 2025-11-2 14:23:31 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
1. 题目

开辟H5的过程中,常常会有android和ios双方体系必要兼容的环境。在ios上不停有个题目是当H5内容触及到页面顶部或底部时,照旧可以被人为的往下或往下拉动界面。固然大概有的环境是比力实用的,比如你往下拉动,然后在导航栏下表现“加载中”来革新页面,但是业务的差别意味着有些H5是不必要这个功能的,但是H5在ios上照旧默承认以往下拉动,在一些css要求比力高的静态页面的H5,就还得单独在最外层的div设置一个background-color来兼容整个页面的风格,否则假如页面团体风格为赤色,但是被用户手动拉下后出现了一堆白色的配景,这肯定是不符合的。(不太懂说什么的看一看下面的示例图,然后可以去任意一个app试试,找找H5的页面看看)。
左图就是H5团体的颜色风格,右图是被用户手动拉下了页面地域后的状态,配景会表现咱们代码最外层div的颜色。固然最简朴的方法给这里设置一个和颜色团体风格同等的颜色就可以。但咱们为了同一android和ios的利用同等,我们照旧要想办法让用户在ios受骗内容表现最顶层的时间不能再滚动了。

2. 办理 

有一个新的css属性可以办理这个题目:overscroll-behavior。 可以看看MDN对于该属性的表明:overscroll-behavior。
官方表明就比力容易明白了,之前说的那种活动称为“滚动链”,假如我们不必要这种活动,像是上面我们说的那种环境就可以利用overscroll-behavior-y: none来办理。


但是特别留意,该属性在ios16以上体系才利用。以是各人可以在开辟H5的过程中可以和产物沟通这个变乱,假如不盼望出现滚动链效果,那么这个属性就派上用场了。


回复

使用道具 举报

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表