scrollIntoView 方法不生效如何解决

ppylox
·11/11/2020·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

页面未加载完成时调用 scrollIntoView 会导致锚点定位失效,因为 DOM 元素尚未渲染。典型场景:用户离开页面时保存锚点到 sessionStorage,返回时需重新定位,但页面有 ajax 请求异步填充内容。解决办法是在 ajax 请求完成、DOM 加载完成后再执行 scrollIntoView,即可正常滚动定位。

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

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

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

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


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

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

\n

相关文章

评论 (0)

暂无评论,来写第一条吧