子元素滚动外面不滚动
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虽然是新特性，但是却可以在实际项目中放心使用，速速用起来吧。
网友评论