最近做了一个需求的，其中有一个效果是点击按钮将表单滚动到可视区域，这本来是很常见的效果。我们有很多种方案去实现。
一、 scrollTo、scroll or scrollBy
image.png
这显示不支持safari on ios ，但是我的手机版本是13.3.1的safari可以运行没有问题，但是安卓手机完全无效果
window.scrollTo({
top: 1000,
left: 100,
behavior: 'smooth'
});
document.body.scrollTo({
top: 1000,
behavior: 'smooth'
});
vue中可以根据ref来操作dom
this.$refs.xxx.$el.scrollTo({
top: 1000,
behavior: 'smooth'
});
window.scroll({
top: 100,
left: 100,
behavior: 'smooth'
});
document.body.scrollBy(0, 1000);
二、scrollTop 获取当前页面的滚动条纵坐标位置去改变其值
- 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ；
- 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop； Safari
- safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ； Firefox
- 火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；
浏览器和ios都可以生效，但是安卓手机手机完全无效果，测试了一下，安卓手机设置完scrollTop再去console出scrollTop的值，发现并没有赋值成功
document.body.scrollTop = document.documentElement.scrollTop = window.pageYOffset = 1000;
三、scrollIntoView 与 scrollIntoViewIfNeeded API （安卓、ios手机支持，浏览器测试结果看来也没问题）
Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。这是一个实验中的功能
image.png
element.scrollIntoView(true);
或者
element.scrollIntoView({behavior: "instant", block: "start", inline: "nearest"});
vue中
this.$refs.xxxx.$el.scrollIntoView();
Element. scrollIntoViewIfNeeded()
如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。 此方法是标准的Element.scrollIntoView()方法的专有变体。非标准 该特性是非标准的，请尽量不要在生产环境中使用它！
image.png
element. scrollIntoViewIfNeeded(true);
vue中根据ref来操作dom
this.$refs.xxxx.$el. scrollIntoViewIfNeeded();
image.png
监听，取消监听滚动事件
注意scroll监听的匿名事件是不可以取消监听事件的，我想要的是页面中所有需要曝光的地方曝光结束后，取消监听事件
可以参照埋点之眼球曝光
window.addEventListener('scroll', this.handleScroll);
window.removeEventListener('scroll', this.handleScroll);
const handleScroll = () => {
console.log(111111)
}
