scrollIntoView()定位元素显示导致页面上移解决方法？

---

项目场景：

在项目中需要根据当前组件的componentId来定位到页面的顶部显示。

---

问题描述

本来想着使用最传统的方法，根据父盒子的高度和子盒子的高度……等，后来发现跟页面布局有关系，使用这种方法会导致跳转不准确，第一次点击可以第二次不行，然后反复尝试……，后续我就想到了它scrollIntoView()。


可能会有小伙伴疑问：“为什么不用scrollTo？”，其实我也想，但是父级盒子不是最外层的啊，scrollTo只能由window调用也就是只能控制最外层的盒子滚动。


但是老天就是不眷顾我这个苦逼，玛德跳转是行了，再紧接着tabs页面也往上偏移了一点……

---

原因分析：

提示：原因不道!就很奇妙

---

解决方案：

1、使用fixed固定定位父级元素

注意：
这边固定定位的盒子是滚动元素的父级（就是带滚动条盒子）

<style>
	/* 解决父级盒子向上偏移 */
	parentBox {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
</style>

2、控制父元素的scrollTop

舍弃scrollIntoView()方法，根据控制父元素的滚动top值，来实现定位。
这种方式最好，因为scrollIntoView()方法会有兼容性问题，像丝滑滚动对于谷歌、火狐和微软这仨浏览器兼容性好。

function jump(id){
	const comDom = document.getElementById('' + id + ''); //当前要定位的DOM元素
	const offsetTop = comDom?.offsetTop - 5; //元素距离外部盒子顶部的高度（-5是为避免被覆盖物遮挡）
	const scrollTopDom = document.getElementsByClassName('van-tabs__content')[0] || {}; // 滚动元素的父级
	scrollTopDom.scrollTop = offsetTop; // 设置父元素的滚动条位置
	console.log('----------跳转成功----------')；
}

上述 -5 为避免fixed覆盖物元素遮挡可以参考这篇文章

目前只是单纯的跳转，要想实现自动滚动，我们需要给滚动的盒子加上scroll-behavior: smooth;，这样就可以实现丝滑的自动跳转了！

注意事项:
offsetTop 不一定是相对于父元素的，如果有很多父元素的话，它是相对于第一个定位的父元素 的。
如果第一个父元素未定位(相对 relative 、绝对 absolute 或固定 fixed )，则可能需要将第二行更改为:
父级元素.scrollTop = 当前元素,offsetTop - 父级元素.offsetTop;

---