zoukankan      html  css  js  c++  java
  • 解决jquery.pjax加载后的异常滚动


    个人博客 地址:http://www.wenhaofan.com/article/20181106154356

    在使用jquery.pjax的时候发现每次加载完成后都会将滚动条滚动至顶部,用户体验极不友好,但是pjax实际上是用的异步加载html,浏览器也不会对点击事件进行操作,于是猜测是在代码中操作了滚动条,于是全局搜索

    scrollTop

    找到了以下代码

       if (hash) {
          var name = decodeURIComponent(hash.slice(1))
          var target = document.getElementById(name) || document.getElementsByName(name)[0]
          if (target) scrollTo = $(target).offset().top
        }
    
        if (typeof scrollTo == 'number') $(window).scrollTop(scrollTo)

    该代码在340行左右,在这里我们可以看见pjax在加载完成后会检查url hash是否为空,如果为空则获取锚点,然后滚动到锚点所在的位置,但是当url hash为空的时候,scrollTo值也依然为0,于是就直接将滚动条滚动到了顶部,这就非常蛋疼了,一般情况下在异步加载完成后我们并不需要滚动条滚动至顶部,所以这个操作异常bug,极其影响体验。

    解决方法也很简单,仅需将 if (typeof scrollTo == 'number') $(window).scrollTop(scrollTo)移动至if代码块中,让它仅在设置锚点时操作滚动条。

  • 相关阅读:
    day20:正则表达式
    day19:os模块&shutil模块&tarfile模块
    zynq之TF卡写入常见问题
    verilog之random
    quartus之ram的IP测试
    verilog之readmemb
    verilog之monitor
    verilog之display
    源自opencore的fifo的IP核解析
    veriog之四位全加器
  • 原文地址:https://www.cnblogs.com/fanwenhao/p/10020244.html
Copyright © 2011-2022 走看看