关于单页面应用，改变路由，滚动条位置不能恢复的问题

[oyp]

做了好些个单页面的网站，经常发现，前一个页面滚动到某个位置，然后跳到另一个页面，再回去，滚动条就莫名其妙地滚到其他位置了，没有回到之前的滚动位置。而我有些页面又可以精准的恢复滚动位置。这个问题困扰好久了，可能是有一个很关键的东西我没学到，不知道大家怎么看？

图：s3.bmp.ovh/imgs/2022/06/28/34637fd5a5c27bcb.png ，用 SPA 模式做的小说网站，点击列表跳转书籍详情，然后回到列表。滚动条就莫名其妙变了

[codehz]

https://www.zhangxinxu.com/wordpress/2022/05/history-scrollrestoration/

（不过恢复失败主要原因是你内容加载太慢，导致尝试恢复的时候你内容高度还不够滚动位置

[codehz]

啊，没注意是 spa ，spa 按照不同实现，如果是保留元素的基本不会出滚动的问题，选择重建元素的，那肯定跑开头去（所以需要自己记录，可以放 history.push 的时候记录）

[iBugOne]

@codehz 关键词 CLS ，Cumulative Layout Shift

[zhuweiyou]

一般是出现在列表跳到详情 再返回到列表的场景

1. keep-alive + 手动记录位置, 但上拉加载更多的场景 数据也得记下来.
2.手动 history push 一条记录, 然后详情和列表放在同一个 page 内, 用显示 /隐藏控制. 这样返回滚动位置还在.

[oyp]

@codehz #2 重建元素，指的是原页面 DOM 改变吗，可是我只是用了显示和隐藏，并没有改变页面内容，滚动条还是会变化，而且滚到快到底部时，切换页面再回去，发现直接就到底部了，这是什么问题

[codehz]

你这切换页面是怎么做的，怎么听起来不太像 spa 的用词
@oyp

[Tidusy]

我遇到过是切换动画导致的，你可以试试去掉动画

[oyp]

@codehz #6 显示隐藏，每个页面一个容器，控制某一个容器显示

[codehz]

@oyp 你这个“容器”是不是具有不同的高度？然后靠整个页面的滚动条来确定位置？

[oyp]

@codehz #9 是的，一个 body 里，每个页面是一个 div ，但每个 div 内容不同，高度也就不同

[codehz]

@oyp 那就很好理解了（全局滚动条只有一个，谁改了都会导致恢复不回去（

[oyp]

@codehz 让每个容器的高度都是 100% ，然后容器自己内部产生一个滚动条吗

[codehz]

@oyp 建议直接 100vw, 100vh 容器（

[br_wang]

@oyp 也可以路由里记录下，返回时加个滚动到目标位置的逻辑，可以看到 vue-router 相关功能的实现，https://github.com/vuejs/router/blob/main/src/scrollBehavior.ts

[oyp]

@codehz 我能问一下为什么有时候 scrollTop 不能回到顶部呢 ，需要设个定时才可以

[codehz]

@oyp 所以你先试试 history.scrollRestoration = 'manual'; 关掉自动的滚动位置恢复（

[oyp]

@codehz #16 不行，现在滚动条变得更混乱了，之前有些页面是可以精准恢复的，现在是彻底难以恢复了，😂😂😂


@codehz #13 我觉得这个 100vh ，100vw 的方法好，需要控制隐藏显示的容器，高度都统一下

[hgaogao]

我也碰到了，op 最终用了什么解决方案