CSS属性sticky, scroll-snap, overscroll-behavior

粘性定位 sticky

element {
  position: sticky;
}

• 粘性定位是fixed和relative的合体版本
• 当元素处于视窗可视区内时：粘性定位呈现和relative一样的效果
• 当元素要离开可视区时：粘性定位会呈现出fixed的效果
• 给粘性定位添加top,bottom改变属性切换的临界值
  • 默认为0，即元素离开可视区时会变为fixed
  • 如果添加了比如top: 100px，则元素在距离视窗100px时切换状态
• 与fixed不同的是，sticky可以依据父元素的范围进行定位，不总是依照整个屏幕定位

⭐️tips: 粘性定位时，父元素不可以有除了overflow:auto之外的设置，不然会破坏文档流的滚动，导致sticky失效。

滑动吸附 scroll-snap

scroll-snap类的css属性可以实现滑动时的吸附效果，让滚动区域内的元素总是停在开始、中间或结束的位置，可以拿这个属性用css做轮播图的效果

scroll-snap-type: decoration mode

• decoration: 第一个属性，决定了滚动定位的方向
  • none：无效果
  • x：水平防线
  • y：垂直方向
  • block：和block元素排列方向一致，默认文档流下是垂直方向
  • inline：和inline元素排列方向一致，默认文档流是水平方向
• mode: 第二个属性，可选属性，决定了定位的准确度
  • mandatory：强制定位，无论视窗大小和元素的增删，强制将元素定位到合适位置
  • proximity：大约，不咋用

scroll-snap-align

它设置在滚动区域的子元素上，决定了定位时是哪一边和容器对齐（或者在容器中居中）

• none:：无效果
• start：起始位置
• end：结束为止
• center：居中

⭐tips：它还支持同时设置两个元素 scroll-snap-align: start end; 此时，第一个属性表示block方向，第二个属性表示inline方向

🚫scroll-snap-stop（目前没有浏览器支持，不能用）

它决定了是否可以忽略捕获位置

• normal：默认值，可以忽略，即可以一次滑动多个元素，到最后一个元素再根据scroll-snap-align做吸附
• always：不能忽略，即一次只能滑动一个元素，滑动过程中不会忽略任何一个捕获位置，只要遇到一个捕获位置就会直接吸附

滚动链 overscroll-behavior

它可以禁止滚动链。 比如：滑动一个列表，总是不小心触发下拉刷新时，可以用overscroll-behavior: contain

滚动链：默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

• auto：默认效果
• contain：禁止滚动链
• none：禁止滚动边界的特效，比如惯性回弹效果