CSS overscroll-behavior让滚动嵌套时父滚动不触发

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9191

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

子元素滚动外面不滚动

web网页开发中，滚动嵌套还是很常见的。

例如我现在写这篇文章的wordpress后台的分类目录就有一个局部滚动条。

在默认情况下，里面的滚动条滚到到底部边缘然后再继续滚动的时候，父滚动条会继续跟着滚动。

GIF示意如下：

但是，有时候我们希望里面的滚动条滚动到底部之后，就没有然后，这样可以方便实现其他一些交互，例如滚动到底部继续Loading加载。

或者单纯就是希望就里面的局部区域安安静静地滚动，不会影响外面页面的大滚动条，例如上面分类目录滚动条，或者下拉列表里面的滚动条。

该如何实现呢？

此时可以使用CSS overscroll-behavior 属性。

overscroll-behavior属性简介

CSS overscroll-behavior 属性可以设置DOM元素滚动到边缘时候的行为。

语法

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

支持1~2个值，因此，下面写法都是OK的：

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

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

参数

各个关键字词的含义如下：

auto

默认值。就是我们默认看到的滚动行为表现，滚动到边缘后继续滚动外部的可滚动容器。

contain

默认的滚动溢出行为只会表现在当前元素的内部（例如“反弹”效果或刷新），不会对相邻的滚动区域进行滚动。例如创建了一个浮层，浮层滚动（带弹性效果），但是底层元素不会滚动。

none

相邻的滚动区域不会发生滚动，并且会阻止默认的滚动溢出行为。

contain 和 none 的行为差异体现主要在移动端。

兼容性

目前Safari浏览器尚不支持，Chrome和Firefox浏览器均支持，IE浏览器则有近似效果属性 -ms-scroll-chaining 代替，不过需要window 8及其以上版本的系统：

由于本身属于体验增强的属性，因此可以在实际项目上大胆使用，浏览器支持自然体验更上一层楼，浏览器如果不支持也就是保持现在这个样子而已。

案例

做了个demo方便大家体验overscroll-behavior这个属性的效果，使用最爱的深天空蓝框一个局部滚动容器，如下图所示：

滚动这个小容器会发现滚动到底部的时候，会发现页面无法再继续滚动了，如下GIF所示（点击播放，340KB）：

整个交互过程没有任何JavaScript代码的参与，就一行简简单单普普通通的CSS代码—— overscroll-behavior:contain ：

zxx-scroll {
    display: block;
    width: 280px; height: 200px;
    padding: .5em 1em;
    margin: 5em auto;
    border: solid deepskyblue;
    overflow: auto;
    overscroll-behavior: contain;
    -ms-scroll-chaining: contain;
}

眼见为实，您可以狠狠的点击这里： CSS overscroll-behavior窗体滚动阻止demo

其他相关语法

和CSS overflow 属性类似，CSS overscroll-behavior 也支持分解为 overscroll-behavior-x 和 overscroll-behavior-y 两个独立CSS属性，分别表示水平滚动和垂直滚动的边界行为。

语法和CSS overscroll-behavior 类似，这里不进一步展开。

三、结语及其他滚动相关CSS属性

目前CSS overscroll-behavior 在PC项目中利用价值反而更大一些，因为在移动端Safari浏览器是个大头。

如果要想让Safari浏览器也有边界滚动阻止行为，需要借助JavaScript代码了，这个可以参考我之前写过的一篇文章“ web移动端浮层滚动阻止window窗体滚动JS/CSS处理 ”。

纵观下来，我发现CSS这门语言中和滚动相关的CSS属性真的是好多，有之前介绍过的scroll-behavior，还有专门的Scroll Snap模块。

分别用来滚动平滑，滚动定位加上本文的滚动边界，真是整整齐齐一家人。

本文介绍的 overscroll-behavior 虽然是新特性，但是却可以在实际项目中放心使用，速速用起来吧。

好了，就说这么多。

本文不需要赞赏，也不需要关注，只要分享即可。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9191

（本篇完）