在鼠标滚轮上自动滚动到下一个锚点

Auto-Scroll to next anchor at Mouse-wheel

本文关键字：滚动 下一个 鼠标      更新时间：2023-09-26

我的html页面上有5个锚点。是否有任何方法可以通过鼠标滚轮滚动将页面自动滚动到下一个锚点（#）？有没有办法不管主播的名字都会发生这种情况？刚好到达下一个锚。

这适用于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
      });
    }
  });
})();

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

它的工作原理

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

要获取鼠标滚轮的方向（向上或向下），请使用event.originalEvent.wheelDelta。同样，Firefox是个怪人，你必须使用-event.originalEvent.detail。

如果方向是负数，则向下滚动页面。在这种情况下，从第一个开始循环遍历每个标记，直到其第一个getClientRects()顶部>=40。（我用了40，以防浏览器在视口顶部添加默认边距。）

如果方向是正数，则向上滚动页面。在这种情况下，循环遍历从最后一个开始的每个标记，直到其第一个getClientRects()顶部&lt-20.（我用-20来确保我们向上移动。）

delay变量可防止鼠标滚轮滚动过快。整个函数被封装在一个闭包中，因此delay仍然是一个私有变量。

假设你有一个ID数组。然后你可以做一些事情，比如。。。

  var ancherList = ["id1","id2","id3"];
  var currentPosition = null;
  var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
  $(document).on(mousewheelevent,function(e){
      var scrollToAncher function (id,speed){
          spd = speed ? "slow" //deafult value for the animation speed
          var ancherTag = $("a[name='"+ id +"']");
          $('html,body').animate({scrollTop: ancherTag.offset().top},spd);
      }
      e.preventDefault();
      var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
      if (delta > 0){
          console.log("up")
          //check your current position and target id
          switch(currentPosition){
            case null :
            case ancherList[0] :
              scrollToAncher(ancherList[1]);
              currentPosition = ancherList[1];
              break;
            case ancherList[1] :
              currentPosition = ancherList[2];
              scrollToAncher(ancherList[2]);
              break;
            case ancherList[2] :
              currentPosition = ancherList[0];
              scrollToAncher(ancherList[0]);
              break;              
          }
      } else {
          console.log("down")
          //do the same for mouse wheel down
      }
  });

代码未测试。很抱歉，如果出现语法错误

相关文章：