最近才看到的一段css,解决了我之前一直想解决的问题。
overscroll-behavior-y: contain;
阻止垂直滚动的「溢出行为传递」(移动端核心优化),应该就是滚动到顶部了就导致出发了webview或者整个网页容器的滚动,导致会出现一个白色空白的区域,影响体验。
默认情况下,当滚动容器滚到顶部 / 底部时,继续滑动会触发父容器 / 整个页面的滚动(比如弹窗内滚动到底后,继续滑会带动页面背景滚动);
contain 会「隔离滚动」:仅在当前容器内处理滚动,不会传递到父容器 / 页面,避免滚动穿透;
适用场景:弹窗、侧边栏、下拉刷新等独立滚动容器(解决移动端「滚动穿透」经典问题)。
如果想直接阻止整个页面级的滚动的话,有如下建议:
禁用浏览器下拉刷新 / 回弹,保留弹性
html { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
彻底禁用所有滚动溢出行为(慎用,体验生硬)
html { overscroll-behavior-y: none; }
仅局部滚动容器隔离,页面保留默认 页面级不加,仅给局部容器加
overscroll-behavior-y: contain
之前做和h5的时候会遇到ios上滑动到顶部时出现空白,有时候会弹一下,想用js解决怎么试都不行,现在问下AI就有办法了,还有其他办法的评论区留言。

