台州网站建设方案推广专业网站建设联系

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的过程中可以和产品沟通这个事情，如果不希望出现滚动链效果，那么这个属性就派上用场了。