内容简介：编者按：本文作者奇舞团前端开发工程师何文力，同时也是 W3C CSS 工作组成员。6 月 6 日，W3C 发布了第一份滚动溢出行为工作组草案 CSS Overscroll Behavior Module Level 1。该草案定义在日常开发过程中，大家应该都见到过这么一个行为：子容器滚动条滚动到底，会带动父容器一起滚动。要解决这个问题，通常我们可以通过监听子容器的事件，然后调用
编者按：本文作者奇舞团前端开发工程师何文力，同时也是 W3C CSS 工作组成员。
6 月 6 日，W3C 发布了第一份滚动溢出行为工作组草案 CSS Overscroll Behavior Module Level 1。该草案定义 overscroll-behavior 去控制滚动视图滚动到边缘时的行为和效果
简介
在日常开发过程中，大家应该都见到过这么一个行为：子容器滚动条滚动到底，会带动父容器一起滚动。要解决这个问题，通常我们可以通过监听子容器的事件，然后调用 preventDefault 或是将父容器的 overflow 临时设置为 hidden 。这种行为又称为连锁滚动（scroll chaining）。
在 CSS Overscroll Behavior 中，将使用 overflow-behavior 去完成相同的事情。
overscroll-behavior 属性
contain
contain 属性值指定浏览器在任何层级的滚动中都可以出现连锁滚动的行为，但仍会出现溢出效果。
例如左侧的导航栏，想让用户在将导航栏滚动到底部时不滚动父容器，则可以设置：
.sidebar {
overscroll-behavior : contain ;
}
none
none 属性值的行为与 contain 行为相同，除此之外，使用该属性值将不会使用溢出滚动效果（如 iOS 上的滚动溢出效果）。
auto
auto 是 overscroll-behavior 的默认值，使用链式滚动行为，并且使用滚动溢出效果。
overscroll-behavior 的长写法
overscroll-behavior: contain 会设定 x 与 y 方向为 contain ，如果需要设定某一边的行为，可以使用 overscroll-behavior-x 以及 overscroll-behavior-y 。
文档流方向相关的长写法
overscroll-behavior-inline 和 overscroll-behavior-block 分别表示了 inline 和 block 方向上的设定，分别与 overscroll-behavior-x 或 overscroll-behavior-y 相对应，实际的对应关系与文档所设定的书写模式 writing-mode 有关。
参考资料
https://www.w3.org/blog/news/archives/7779
https://www.w3.org/TR/2019/WD-css-overscroll-1-20190606/
关于奇舞周刊
《奇舞周刊》是360公司专业前端团队「 奇舞团 」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
CSS禅意花园
[美] Dave Shea、Molly E. Holzschlag / 陈黎夫、山崺颋 / 人民邮电出版社 / 2007-6 / 49.00元
这本书的作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS禅意花园）。全书分为两个主要部分。第1章为第一部分，讨论网站“CSS禅意花同”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括6章，占据了书中的大部分篇幅。 每章剖析“CSS禅意花园”收录的6件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。通过探索......一起来看看 《CSS禅意花园》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
Base64 编码/解码
Base64 编码/解码