CSS 让滚动嵌套时局部滚动到头或底部后 父滚动不触发滚动 overscroll-behavior

在局部容器使用 overscroll-behavior 属性：
语法：

overscroll-behavior: [ contain | none | auto ]{1,2}


/* 单个关键字值 */
overscroll-behavior: auto;     /* 默认值 */
overscroll-behavior: contain;
overscroll-behavior: none;

/* 两个值，分别表示x方向和y方向 */
overscroll-behavior: auto contain;

兼容性
目前Safari浏览器尚不支持，Chrome和Firefox浏览器均支持，IE浏览器则有近似效果属性-ms-scroll-chaining代替，不过需要window 8及其以上版本的系统：
https://caniuse.com/#search=overscroll-behavior

例子：

.child-div{
    overscroll-behavior: contain;
    -ms-scroll-chaining: contain; 
}

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/252.html

转载时须注明出处及本声明