javascript - 自动滚动到鼠标滚轮的下一个 anchor

Question

我的 html 页面上有 5 个 anchor 。有什么方法可以通过单个鼠标滚轮滚动页面自动滚动到下一个 anchor (#)？有没有一种方法可以不管主播的名字如何？只是到下一个 anchor 。

Answer 1

这适用于 Chrome、IE、Firefox、Opera 和 Safari:

(function() {
  var delay = false;

  $(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('a');
    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }
    if(i >= 0 && i < a.length) {
      $('html,body').animate({
        scrollTop: a[i].offsetTop
      });
    }
  });
})();

fiddle http://jsfiddle.net/t6LLybx8/728/

工作原理

要在大多数浏览器中监控鼠标滚轮，请使用 $(document).on('mousewheel')。 Firefox 很奇怪，它需要 $(document).on('DOMMouseScroll')。

要获取鼠标滚轮的方向(向上或向下)，请使用 event.originalEvent.wheelDelta。同样，Firefox 很奇怪，您必须使用 -event.originalEvent.detail。

如果方向是负数，则表示您正在向下 滚动页面。在这种情况下，遍历以 first 开头的每个标记，直到它的第一个 getClientRects() 顶部 >= 40。(我使用 40，以防浏览器添加视口(viewport)顶部的默认边距。)

如果方向是正数，则您正在向上滚动页面。在这种情况下，循环遍历以 last 开始的每个标记，直到它的第一个 getClientRects() top 为 < -20。 (我使用 -20 来确保我们向上移动页面。)

delay 变量防止鼠标滚轮滚动得太快。整个函数都包裹在一个闭包中，因此 delay 仍然是一个私有(private)变量。