网页滚动
1. position: sticky;
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为
2. CSS视差
利用CSS perspective，CSS 属性 perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。
在元素有透视属性下，滚动会根据远近有不同景深效果。
DEMO（codepen.io）
3. CSS滚动对其
利用CSS scroll-snap-type，如同flex，在元素添加scroll-snap-type，子元素将视为scroll-snap子元素，子元素设置相应的scroll-snap-align属性控制自动对齐方式。
DEMO（codepen.io）
4. DOM滚动API
window.scrollTo() javascript在浏览器宿主中实现的API。
scroll-behavior设置API滚动方式。
5. Intersection Observer API
IntersectionObserver()构造器创建并返回一个IntersectionObserver对象。 如果指定rootMargin则会检查其是否符合语法规定，检查阈值以确保全部在0.0到1.0之间，并且阈值列表会按升序排列。如果阈值列表为空，则默认为一个[0.0]的数组。
6. 滚轮事件
当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件。滚轮事件替换了已被弃用的非标准mousewheel事件。
该接口继承了父接口MouseEvent、UIEvent、Event的属性。
MouseEvent.offsetX鼠标指针相对于目标节点内边位置的X坐标；MouseEvent.offsetY鼠标指针相对于目标节点内边位置的Y坐标。
