Scorrimento automatico al successivo ancoraggio alla rotellina del Mouse

Ho 5 ancore sulla mia pagina html. C’è un modo che la pagina scorre automaticamente per il successivo ancoraggio (#) da un singolo rotellina di scorrimento? C’è un modo che si verifica a prescindere di ancorare il nome? solo per il prossimo ancora.

La rotellina del mouse fare clic su o la rotellina di scorrimento?
Si potrebbe utilizzare il window.scroll() funzione insieme con il .next() funzione e il .scrollTop() funzione

OriginaleL’autore Ogdila | 2014-09-15

2 Replies
  1. 22

    Questo funziona in Chrome, IE, Firefox, Opera e 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
          });
        }
      });
    })();

    Violino a http://jsfiddle.net/t6LLybx8/728/

    Come funziona

    Per monitorare la rotellina del mouse nella maggior parte dei browser, utilizzare $(document).on('mousewheel'). Firefox è il tipo strano, e richiede $(document).on('DOMMouseScroll').

    Per ottenere la direzione della rotellina del mouse (su o giù), uso event.originalEvent.wheelDelta. Di nuovo, Firefox, stravagante, e devi usare -event.originalEvent.detail.

    Se la direzione è un numero negativo, ti stai muovendo giù pagina. In questo caso, loop attraverso ogni tag che iniziano con la primo, fino alla sua prima getClientRects() top >= 40. (Io ho usato 40, nel caso in cui il browser aggiunge un default margine superiore della finestra.)

    Se la direzione è un numero positivo, ti stai muovendo fino pagina. In questo caso, loop attraverso ogni tag che iniziano con la ultimo, fino alla sua prima getClientRects() top < -20. (Io ho usato -20 per assicurarci di spostare la pagina.)

    Il delay variabile impedisce la rotellina del mouse a scorrimento troppo in fretta. L’intera funzione è avvolto in una chiusura, in modo delay rimane una variabile privata.

    questo è il modo sensibile
    hai assolutamente ragione. Ho aggiornato il mio codice, e ora dovrebbe funzionare in tutti i browser.
    Grazie Rick. C’è qualche possibilità di ottenere lo scorrimento uniforme in tutto questo? Scorrimento salta di ancoraggio, invece di scorrere.
    Certo. Non è possibile animare scrollIntoView, ma è possibile simulare l’animazione di scollTop per il a‘s offsetTop. Ho aggiornato la mia risposta.
    Ciao @RickHitchcock, come faccio a mettere una distanza in pixel dall’alto? Ho un’intestazione di fissaggio, che è il motivo per cui è necessario aggiungere la distanza dalla parte superiore della finestra

    OriginaleL’autore Rick Hitchcock

  2. 1

    supponiamo di avere un array di Id.poi si può fare qualcosa di simile…

      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
          }
      });

    codice non è testato.scusate se c’è stato errore di sintassi

    OriginaleL’autore suish

Lascia un commento