V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
oyp
V2EX  ›  程序员

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

  •  
  •   oyp ·
    oyps · 96 天前 via Android · 1320 次点击
    这是一个创建于 96 天前的主题,其中的信息可能已经有所发展或是发生改变。
    做了好些个单页面的网站,经常发现,前一个页面滚动到某个位置,然后跳到另一个页面,再回去,滚动条就莫名其妙地滚到其他位置了,没有回到之前的滚动位置。而我有些页面又可以精准的恢复滚动位置。这个问题困扰好久了,可能是有一个很关键的东西我没学到,不知道大家怎么看?
    第 1 条附言  ·  96 天前
    图:s3.bmp.ovh/imgs/2022/06/28/34637fd5a5c27bcb.png ,用 SPA 模式做的小说网站,点击列表跳转书籍详情,然后回到列表。滚动条就莫名其妙变了
    18 条回复    2022-06-29 08:47:03 +08:00
    codehz
        1
    codehz  
       96 天前 via Android
    https://www.zhangxinxu.com/wordpress/2022/05/history-scrollrestoration/

    (不过恢复失败主要原因是你内容加载太慢,导致尝试恢复的时候你内容高度还不够滚动位置
    codehz
        2
    codehz  
       96 天前 via Android
    啊,没注意是 spa ,spa 按照不同实现,如果是保留元素的基本不会出滚动的问题,选择重建元素的,那肯定跑开头去(所以需要自己记录,可以放 history.push 的时候记录)
    iBugOne
        3
    iBugOne  
       96 天前 via Android
    @codehz 关键词 CLS ,Cumulative Layout Shift
    zhuweiyou
        4
    zhuweiyou  
       96 天前
    一般是出现在列表跳到详情 再返回到列表的场景

    1. keep-alive + 手动记录位置, 但上拉加载更多的场景 数据也得记下来.
    2.手动 history push 一条记录, 然后详情和列表放在同一个 page 内, 用显示 /隐藏控制. 这样返回滚动位置还在.
    oyp
        5
    oyp  
    OP
       96 天前
    @codehz #2 重建元素,指的是原页面 DOM 改变吗,可是我只是用了显示和隐藏,并没有改变页面内容,滚动条还是会变化,而且滚到快到底部时,切换页面再回去,发现直接就到底部了,这是什么问题
    codehz
        6
    codehz  
       96 天前 via Android
    你这切换页面是怎么做的,怎么听起来不太像 spa 的用词
    @oyp
    Tidusy
        7
    Tidusy  
       96 天前
    我遇到过是切换动画导致的,你可以试试去掉动画
    oyp
        8
    oyp  
    OP
       96 天前
    @codehz #6 显示隐藏,每个页面一个容器,控制某一个容器显示
    codehz
        9
    codehz  
       96 天前
    @oyp 你这个“容器”是不是具有不同的高度?然后靠整个页面的滚动条来确定位置?
    oyp
        10
    oyp  
    OP
       96 天前
    @codehz #9 是的,一个 body 里,每个页面是一个 div ,但每个 div 内容不同,高度也就不同
    codehz
        11
    codehz  
       96 天前
    @oyp 那就很好理解了(全局滚动条只有一个,谁改了都会导致恢复不回去(
    oyp
        12
    oyp  
    OP
       96 天前 via Android
    @codehz 让每个容器的高度都是 100% ,然后容器自己内部产生一个滚动条吗
    codehz
        13
    codehz  
       96 天前
    @oyp 建议直接 100vw, 100vh 容器(
    br_wang
        14
    br_wang  
       96 天前
    @oyp 也可以路由里记录下,返回时加个滚动到目标位置的逻辑,可以看到 vue-router 相关功能的实现,https://github.com/vuejs/router/blob/main/src/scrollBehavior.ts
    oyp
        15
    oyp  
    OP
       96 天前 via Android
    @codehz 我能问一下为什么有时候 scrollTop 不能回到顶部呢 ,需要设个定时才可以
    codehz
        16
    codehz  
       96 天前
    @oyp 所以你先试试 history.scrollRestoration = 'manual'; 关掉自动的滚动位置恢复(
    oyp
        17
    oyp  
    OP
       96 天前
    @codehz #16 不行,现在滚动条变得更混乱了,之前有些页面是可以精准恢复的,现在是彻底难以恢复了,😂😂😂


    @codehz #13 我觉得这个 100vh ,100vw 的方法好,需要控制隐藏显示的容器,高度都统一下
    hgaogao
        18
    hgaogao  
       95 天前 via Android
    我也碰到了,op 最终用了什么解决方案
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2034 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 42ms · UTC 03:57 · PVG 11:57 · LAX 20:57 · JFK 23:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.