阻止父元素 滚动, 阻止下拉刷新

chrome 新 css 属性 overscroll-behavior:
auto – 默认。元素的滚动会传播给祖先元素。
contain – 阻止滚动链接。滚动不会传播给祖先,但会显示元素内的原生效果。
none – 和 contain 一样,但它也可以防止节点本身的滚动效果(例如 Android 炫光或 iOS 回弹)。

背景历史
滚动边界和滚动链接(scroll boundary & scroll chaining)
滚动到底部时,滚动停止,因为我们到达了”滚动边界”
在 Web 页面中滚动并不会停止,而是继续滚动抽屉后面的内容,我们称这种行为叫滚动链接(scroll chaining)

历史处理
浮层出现
body 加入 overflow: hidden;
浮层隐藏 css 取消

禁用下拉刷新 pull-to-refresh

[cc lang=”css”]body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}[/cc]

禁用炫光和回弹效果

[cc lang=”css”]body {
/* 禁用默认的下拉刷新和边界效果
但是依然可以进行滑动导航 */
overscroll-behavior-y: none;
}[/cc]

Leave a Reply

Your email address will not be published. Required fields are marked *