overscroll-behavior
986
0
2022-12-03
2022-12-03
Hey、小怪兽
- • overscroll-behavior是CSS的属性，MDN是这样介绍的：默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”
- • 在某些情况下我们不想要这些表现，使用 overscroll-behavior 来去除不需要的滚动链，以及类似 QQ 一类的应用下拉刷新效果
-
overscroll-behavior: auto; /* 默认 */ overscroll-behavior: contain; overscroll-behavior: none; // 使用两个关键字来指定 overscroll-behavior overscroll-behavior-x: auto; /* 默认 */ overscroll-behavior-y: auto; /* 默认 */ - • overscroll-behavior: auto，就是默认的属性，拿我社区的追番页面举例子，看下边的Gif，这个追番卡片里面有一个滚动条，外部芋圆社区也有一个滚动条
- • auto的默认行为就是，当里面卡片的滚动条拉到最底部了，它就会开始下拉外部的滚动条
- • 这并不是所希望的，而且在移动端和Mac笔记本时常会有橡皮筋的现象（触底反弹）
- • 那就需要用到另外2个值了，overscroll-behavior: contain，默认的滚动溢出行为将被内部的元素观察到，(例如：“bounce”效果或者刷新)，但是相邻的区域不会产生连续滚动效果
- • 一般情况下用这个就可以了，它既可以保持浏览器滚动的弹性效果，还可以起到防止滚动移除和一些手势导航的问题
- • overscroll-behavior: none指的是相邻的滚动区域不会有连续滚动效果，并且默认的滚动溢出行为会被阻止，这样设置的话浏览器触底没有反应，会显得比较生硬