自动滚动到鼠标滚轮上的下一个锚点 [英] Auto-Scroll to next anchor at Mouse-wheel

问题描述

我的HTML页面上有5个锚点。有没有办法通过单个鼠标滚轮滚动页面自动滚动到下一个锚点（＃）？有没有一种方法可以发生，无论主播的名字如何？只适用于下一个定位点。

解决方案

这适用于Chrome，IE，Firefox，Opera和Safari。 b
$ b

 （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  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; $ b $如果（i> = 0&< i< a.length）{
 $（b> b）
} HTML，身体）动画（{
 scrollTop的：A [1] .offsetTop 
}）; 
} 
}）; 
}）（）; 
  

小提琴 http://jsfiddle.net/t6LLybx8/728/

工作原理

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

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

是负数，您正在向页面滚动向下。在这种情况下，循环遍历每个以 first 开始的标记，直到它的第一个 getClientRects（） top>> 40.（我用了40，以防止浏览器在视口顶部添加默认边距。）

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

$ b $ < delay 变量可防止鼠标滚轮从滚动过快。整个函数封装在一个闭包中，所以 delay 仍然是一个私有变量。

I have 5 anchors on my html page. Is there any way that the page scrolls automatically to the next anchor (#) by a single Mouse-wheel scroll? Is there a way that it happens regardless of the anchor's name? just to the next anchor.

解决方案

This works in Chrome, IE, Firefox, Opera, and 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 at http://jsfiddle.net/t6LLybx8/728/

How it works

To monitor the mouse wheel in most browsers, use $(document).on('mousewheel'). Firefox is the oddball, and it requires $(document).on('DOMMouseScroll').

To get the direction of the mouse wheel (up or down), use event.originalEvent.wheelDelta. Again, Firefox is the oddball, and you have to use -event.originalEvent.detail.

If the direction is a negative number, you're scrolling down the page. In that case, loop through each tag beginning with the first, until its first getClientRects() top is >= 40. (I used 40, in case the browser adds a default margin at the top of the viewport.)

If the direction is a positive number, you're scrolling up the page. In that case, loop through each tag beginning with the last, until its first getClientRects() top is < -20. (I used -20 to ensure we move up the page.)

The delay variable prevents the mouse wheel from scrolling too quickly. The entire function is wrapped in a closure, so delay remains a private variable.

这篇关于自动滚动到鼠标滚轮上的下一个锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！