简单盘点浏览器的几种滚动行为(笔记亲测有效)

本文链接：https://blog.csdn.net/u013165804/article/details/88425014

让页面或元素的滚动如丝般柔滑
一   scroll-behavior: smooth | auto; 

// 实现
html,
body {
	scroll-behavior: smooth;
}

二 .scroll()、 .scrollTo()、 .scrollIntoView()

scroll(x, y)、 scrollTo(x, y)、

// 具体使用
scrollOptions = {
  	top: 0,
  	left: 0,
  	behavior: 'smooth' //平滑滚动
};

window.scrollTo(scrollOptions);

三
里面元素滚动到底外部容器不滚动实例页面
多滚动区域，滚动不传播。

overscroll-behavior: contain | auto | none;
overscroll-behavior-x: contain | auto | none;
overscroll-behavior-y: contain | auto | none;

auto - 默认。元素的滚动会传播给祖先元素。
contain - 阻止滚动链接，滚动不会传播给祖先。
none - 和 contain 效果一样。

四 scroll-snap-*

规范滚动元素的定位

scroll-snap-type: y mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: x mandatory;
scroll-snap-type: x proximity;
//   主要代码
.container.y-mandatory {
    scroll-snap-type: y mandatory; 
}
.container.y-proximity {
    scroll-snap-type: y proximity;
}
.container.x-mandatory {
    scroll-snap-type: x mandatory;
}
.container.x-proximity {
    scroll-snap-type: x proximity;
}
.y > .scroll-item {
	scroll-snap-align: start;
}
.x > .scroll-item {
	scroll-snap-align: center;
}

//mandatory： 强制，强制地定位到某个滚动元素
proximity：邻近，个人理解是：只有当某个滚动元素“足够”进入滚动容器的时候才会控制定位
这两个概念在使用上略有差异

五: history.scrollRestoration
设置返回页面是否返回原滚动位置

在从页面跳转回来的时候，一般浏览器都会“贴心”地返回到该页面原来的滚动位置，该行为由 history.scrollRestoration 属性控制的，默认是“auto”，

若不想回到原来的位置，可将值设为“manual”，手动，即不返回原位置，而是手动返回，此时浏览器会返回到页面顶部。但据测试，“返回”都是瞬间的，即使设置了 scroll-behavior: smooth 也无效。

if ('scrollRestoration' in history) {
  	history.scrollRestoration = 'manual';
}