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

这篇文章发布于 2020年01月5日,星期日,21:11,归类于 CSS相关。 阅读 3369 次, 今日 15 次 8 条评论

 

小鱼儿占位图

子元素滚动外面不滚动

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
相邻的滚动区域不会发生滚动,并且会阻止默认的滚动溢出行为。

containnone的行为差异体现主要在移动端。

兼容性

目前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-xoverscroll-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虽然是新特性,但是却可以在实际项目中放心使用,速速用起来吧。

好了,就说这么多。

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

(本篇完)

分享到:


发表评论(目前8 条评论)

  1. redbuck说道:

    旭哥,你是从什么途径获得这些新知识的?

  2. 王侃说道:

    学习,并摘抄了!

  3. joyber说道:

    学习了,膜拜我的大神

  4. white500说道:

    张老师 ,今年还有每周的小测吗

  5. 小弟说道:

    旭神,我想请教一下,有没有办法,在手指搓动局部的时候,局部不滚,优先让父元素滚动,父元素滚到无法再滚时,才让局部滚动?

  6. TonyJ说道:

    每次写前端小项目时碰到不会的,搜着搜着就来到大佬的博客了。目前还有半年就要从二流美硕毕业了,周围的同学不是搞硬件的就是搞机器学习相关的,就我选择了做UI相关。第一次来到前辈博客是在搜“网页无障碍”的内容,当时在国外老师那看到这个题目的时候还想,怎么美国人对这个这么重视,国内连条盲道都做不好。当看到前辈的关于无障碍的理解后,才发现原来国内还有大佬在关注这个,很惊讶。以后还会继续关注大佬的博客的!

  7. 啊噢说道:

    放心用起来