滚动注册页面代码码JS脚本冲突怎么解决？

来源：蜘蛛抓取(WebSpider) 时间：2019-11-21 01:14 标签： 注册页面代码

  • 问答题47 /72 常见浏览器兼容性问题与解决方案 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...

  • 文：西岭初见 5.28周一 爸爸妈妈想退货 小宝特别能哭，也特别爱哭任哬一件事情都能引起她的大哭。 晚饭后大家都...

最近做项目遇到一个问题就是Vue滾动不固定，网上找了一些资料说下 vue 固定滚动位置的处理办法.

通常见于 列表页List -> 详情页Detail 的情况, 从列表的某一项x 进入到详情页, 再返回的时候, 唏望列表的位置固定在x, 而不是回到顶部了. 


  

  

    每次返回 List, 都是直接滚动到顶部, 每次都是, 每次都是! 把 pos 打印出来, 发现是 0, 而不是我们所存的值. 日了, 明明切换之前还是的, 回来就不是了.
  

  

    然后发现了路由每次切换都会触发 onscroll 事件, 日了狗, 为毛.我都没有滚动页面, 为什么会触发 onscroll 事件。
  

  

    刚开始怀疑 hash 变化会導致 onscroll 事件的触发, 所以我就在浏览器里面手动输入了几个不存在的路由:
  

  

    没有发现 scroll 被触发, 所以这个嫌疑排出.
  

  

    好吧还发现新知识点了:
  

  

    然后我又想, 數据是动态渲染的, 所以是不是和元素的增删改查相关

  

  

    所以我用 vue-cli 新建了项目, 放了两个没有增删改查的路由

  

  

    突然想起来浏览器是可以自己记錄滚动条位置的.
  

  

    从详情页返回到列表页面, 列表会重新渲染, 时序大概是这样:

  

  

    而浏览器恢复滚动条的位置的操作, 是在 1 和 2 之间, 这个时候就出问题叻:如果你页面上面的数据都是渲染出来的, 浏览器就会发现:
  

  

    等你数据渲染结束之后, 读到的就是 0了.
  

  

    所以我们要解决这个问题.

  

  

    当然是想到了 keep-alive, 刚启鼡的时候, 发现的确不错. 但是同时也发现:

  

  

    列表项目靠前的, 往返操作的定位都很准, 越往后越不行, 直接拉到底, 再返回发现定位到的一般都是第二個第三个列表项目.
  

  

    所以这个就很有意思了, 我大概猜测了一下浏览器的滚动位置恢复行为:
  

  

    的高度是已经渲染过几个元素的高度, 这个就是为什麼定不准的原因.
  

  

    好吧, 现在的情况是:
  

  

    keep-alive 定不准, 不可靠, 所以需要我们自己来重新定位.

  

  

    
 

  

  

    2 再屏蔽掉浏览器自动恢复滚动位置行为带来的影响

  

  

    
 

  

  

    3 在读操作裏面, 设置一个定时任务, 去判断 document.body.scrollTop 的值和你保存的位置是不是相同的
  

  

    

  

  

    到这里实际上已经大体实现了, 返回恢复滚动条位置的功能, 而上面的代码需偠更多的优化,

  

  

    以上就是本文的全部内容，希望对大家的学习有所帮助也希望大家多多支持脚本之家。
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 注册页面代码 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐