这篇文章发布于 2020年01月5日,星期日,21:11,归类于 CSS相关。 阅读 52706 次, 今日 24 次 11 条评论
by zhangxinxu 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
(本篇完)
- CSS overflow-anchor属性与滚动锚定 (0.711)
- 介绍8个和滚动相关的CSS属性 (0.711)
- 还有完没完,怎么又来了个 scrollbar-gutter? (0.530)
- 不能落后,好好缕缕CSS滚动动画 (0.328)
- jQuery页面滚动图片等元素动态加载实现 (0.186)
- CSS scroll-behavior和JS scrollIntoView让页面滚动平滑 (0.186)
- 大侠,请留步,要不过来了解下CSS Scroll Snap? (0.186)
- 使用document.scrollingElement控制窗体滚动高度 (0.186)
- 纯CSS实现易拉罐3D滚动效果 (0.147)
- web移动端浮层滚动阻止window窗体滚动JS/CSS处理 (0.147)
- div模拟textarea文本域轻松实现高度自适应 (RANDOM - 0.044)
太棒了,多谢
-ms-scroll-chaining并不支持contain,至少在我的IE上。
代码提示告诉我它支持chained 和 none .
有很多年不来了,旭神,路过又看到了新知识,谢谢谢谢
旭哥,你是从什么途径获得这些新知识的?
学习,并摘抄了!
学习了,膜拜我的大神
张老师 ,今年还有每周的小测吗
旭神,我想请教一下,有没有办法,在手指搓动局部的时候,局部不滚,优先让父元素滚动,父元素滚到无法再滚时,才让局部滚动?
你这个需求还真有点奇葩了,什么需求场景啊
每次写前端小项目时碰到不会的,搜着搜着就来到大佬的博客了。目前还有半年就要从二流美硕毕业了,周围的同学不是搞硬件的就是搞机器学习相关的,就我选择了做UI相关。第一次来到前辈博客是在搜“网页无障碍”的内容,当时在国外老师那看到这个题目的时候还想,怎么美国人对这个这么重视,国内连条盲道都做不好。当看到前辈的关于无障碍的理解后,才发现原来国内还有大佬在关注这个,很惊讶。以后还会继续关注大佬的博客的!
放心用起来