防止子元素滚动影响父元素滚动--overscroll-behavior

2,726 阅读1分钟

首先提出一个概念-------滚动链

滚动链:当页面子元素滚动到边界时,在父元素也是可滚动的情况下,会滚动父元素中的内容,这被称作滚动链(此概念不一定准确,不要以我为准)。

可查看 MDN链接:developer.mozilla.org/zh-CN/docs/…

再来介绍主角:

overscroll-behavior:

overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。

回到滚动链,你就可以发现,我们可以设置子元素overscroll-behavior属性,来改变子元素滚动到边界时,不再滚动父元素的内容区

tips
	1:在PC端,可以设置为contain,或者none,即可达到不滚动父元素的效果
    2:在安卓端,设置为none,还可以移除滚动到顶部或者底部的特效