Question

我正在尝试跟踪由于在URL中锚定哈希而发生的自动滚动所产生的滚动事件。例如http://example.com/page.html#theID它应该滚动到id的DOM元素等于theID。

我需要跟踪此事件以克服Bootstrap导航栏覆盖该元素，方法是增加其填充或滚动指向比从顶部更近的点，以确保它不会被覆盖。我尝试了以下代码：

...     
<script>
        $(document).ready(function(){
          $(this).on("scroll",function(){
             alert('Scroll Event...');
          })
        })
    <script>
    </body>
    </html>

如上所述在URL中加载带锚点的页面时，上述代码不起作用。但是，它仅在我手动滚动页面时才有效。

因此，有没有办法跟踪转到锚点的自动滚动？

Answer 1

从this answer我已经构建了检测自动滚动的实现，然后在锚点上方滚动以解决锚点区域的bootstrap的导航栏封面。

<script type="text/javascript">
    autoScroll = true;
window.onscroll = function (e) {       
   if (autoScroll){ 
       axisY = e.pageY; //FireFox
       if (axisY == null){
           //It is not FireFox, 
       // it tested with Opera, Chrome, Ubuntu Web Browser, Android Browser.
           axisY = e.path[1].pageYOffset;
       }         
         $("html body").animate({scrollTop:axisY-70});
         autoScroll = false;
    }        
}

布尔autoScroll是为了防止在页面加载后停止普通滚动

滚动时的jQuery不会使用锚点哈希滚动触发

1 个答案: