解决Vue页面固定滚动位置的处理办法
元素增加-> 页面高度变了 -> 页面高度变化, 也触发 scroll 事件?而浏览器恢复滚动条的位置的操作, 是在 1 和 2 之间, 这个时候就出问题了:如果你页面上面的数据都是渲染出来的, 浏览器就会发现:等你数据渲染结束之后, 读到的就是 0了.如果发现你页面高度大于屏幕高度, 但是页面高度是 n, 而 pos 的值是: n + x, 比当前页面的最大的 scrollTop 值还大, 这个时候, document.body.scrollTop 的值就会等于 n.所以我们要解决这个问题.当然是想到了 keep-alive, 刚启用的时候, 发现的确不错. 但是同时也发现:列表项目靠前的, 往返操作的定位都很准, 越往后越不行, 直接拉到底, 再返回发现定位到的一般都是第二个第三个列表项目.所以这个就很有意思了, 我大概猜测了一下浏览器的滚动位置恢复行为:当 hashchange 的时候。
下载地址
用户评论