scrollIntoView 方法不生效如何解决

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

今天在项目中项目中碰到了这个问题就是scrollIntoView这个方法不生效，也就是锚点无法定位，当然在一个已经加载完成的页面中通锚点定位是没问题的，但是如果在页面还未加载完成的时候就调用这个方法就会出现可能不生效的问题，比如有如下这种场景：

用户在某个页面做了操作跳出该页面，假设此时已经记录跳出前的锚点（比如将点击的锚点保存到sessionStorage），想在用户切回该页面时重新定位到之前的模块(从的sessionStorage里面获取之前保存的锚点)，该页面有正常的ajax请求，请求完成后会在不同模块中填充内容。

这时候如果你一加载页面就执行scrollIntoView方法可能不生效，因为此时dom未加载完成，所以定位不到具体位置，解决办法就是在ajax请求完成后再执行这个方法，就可以生效了。

let dom = document.querySelector("#mid") // document.getElementById("mid")
dom.scrollIntoView()

所以scrollIntoView不生效的原因其实就是在执行该方法的时候dom元素还未加载完成，只需要在dom元素加载完成后再执行该方法就可以了。

本文章由javascript技术分享原创和收集