做了好些个单页面的网站，经常发现，前一个页面滚动到某个位置，然后跳到另一个页面，再回去，滚动条就莫名其妙地滚到其他位置了，没有回到之前的滚动位置。而我有些页面又可以精准的恢复滚动位置。这个问题困扰好久了，可能是有一个很关键的东西我没学到，不知道大家怎么看？
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 1441 days ago, the information mentioned may be changed or developed.
Supplement 1 · Jun 28, 2022
图：s3.bmp.ovh/imgs/2022/06/28/34637fd5a5c27bcb.png ，用 SPA 模式做的小说网站，点击列表跳转书籍详情，然后回到列表。滚动条就莫名其妙变了
 |
1
codehz Jun 28, 2022 via Android
https://www.zhangxinxu.com/wordpress/2022/05/history-scrollrestoration/
（不过恢复失败主要原因是你内容加载太慢，导致尝试恢复的时候你内容高度还不够滚动位置 |
|
2
codehz Jun 28, 2022 via Android
啊，没注意是 spa ，spa 按照不同实现，如果是保留元素的基本不会出滚动的问题，选择重建元素的，那肯定跑开头去（所以需要自己记录，可以放 history.push 的时候记录）
|
 |
4
zhuweiyou Jun 28, 2022
一般是出现在列表跳到详情 再返回到列表的场景
1. keep-alive + 手动记录位置, 但上拉加载更多的场景 数据也得记下来. 2.手动 history push 一条记录, 然后详情和列表放在同一个 page 内, 用显示 /隐藏控制. 这样返回滚动位置还在. |
 |
5
oyp OP @codehz #2 重建元素，指的是原页面 DOM 改变吗，可是我只是用了显示和隐藏，并没有改变页面内容，滚动条还是会变化，而且滚到快到底部时，切换页面再回去，发现直接就到底部了，这是什么问题
|
 |
7
Tidusy Jun 28, 2022
我遇到过是切换动画导致的，你可以试试去掉动画
|
 |
14
br_wang Jun 28, 2022
@oyp 也可以路由里记录下，返回时加个滚动到目标位置的逻辑，可以看到 vue-router 相关功能的实现，https://github.com/vuejs/router/blob/main/src/scrollBehavior.ts
|
|
17
oyp OP |
 |
18
hgaogao Jun 29, 2022 via Android
我也碰到了，op 最终用了什么解决方案
|
Select Language