CSS overscroll-behavior让滚动嵌套时父滚动

子元素滚动外面不滚动

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及其以上版本的系统：

overscroll-behavior兼容性表

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

案例

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

滚动区域示意

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

滚动到底部不再滚动GIF示意

整个交互过程没有任何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浏览器是个大头。

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