jquery - down - Cómo hacer que la rueda del mouse se desplace a la sección como en mediafire.com

scroll down jquery

Question

Encontré la página de inicio de este sitio web http://www.mediafire.com/ , en la que cuando mueves la rueda del mouse, la página se coloca automáticamente en la siguiente sección de la página. Me gusta saber cómo se hace. Puede alguien ayudarme con esto. Gracias por adelantado.

Saludos, Aswin

Answer 1

Creo que este tipo de animación es probablemente difícil de aceptar, especialmente alguien nuevo en jQuery. Esto implica desplazarse, capturar los eventos de la rueda del mouse, retrasar las animaciones y, sobre todo, hacer que funcione correctamente en los navegadores cruzados y en los eventos de deslizamiento y toque de los navegadores móviles. Si no tiene una comprensión sólida, le sugiero que use un complemento. Estos dos son los mejores: desplazamiento de una página y página completa .

Solo puedo mostrarle el método básico sobre cómo hacer esto en navegadores cruzados, si desea que funcione correctamente en el móvil, debe hacer su parte y agregar los eventos deslizables y táctiles. :)

//Set each section''s height equals to the window height
$(''section'').height($(window).height());
/*set the class ''active'' to the first element 
 this will serve as our indicator*/
$(''section'').first().addClass(''active'');

/* handle the mousewheel event together with 
 DOMMouseScroll to work on cross browser */
$(document).on(''mousewheel DOMMouseScroll'', function (e) {
    e.preventDefault();//prevent the default mousewheel scrolling
    var active = $(''section.active'');
    //get the delta to determine the mousewheel scrol UP and DOWN
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;

    //if the delta value is negative, the user is scrolling down
    if (delta < 0) {
        //mousewheel down handler
        next = active.next();
        //check if the next section exist and animate the anchoring
        if (next.length) {
           /*setTimeout is here to prevent the scrolling animation
            to jump to the topmost or bottom when 
            the user scrolled very fast.*/
            var timer = setTimeout(function () {
                /* animate the scrollTop by passing 
                the elements offset top value */
                $(''body, html'').animate({
                    scrollTop: next.offset().top
                }, ''slow'');

                // move the indicator ''active'' class
                next.addClass(''active'')
                    .siblings().removeClass(''active'');

                clearTimeout(timer);
            }, 800);
        }

    } else {
        //mousewheel up handler
        /*similar logic to the mousewheel down handler 
        except that we are animate the anchoring 
        to the previous sibling element*/
        prev = active.prev();

        if (prev.length) {
            var timer = setTimeout(function () {
                $(''body, html'').animate({
                    scrollTop: prev.offset().top
                }, ''slow'');

                prev.addClass(''active'')
                    .siblings().removeClass(''active'');

                clearTimeout(timer);
            }, 800);
        }

    }
});

Aquí hay una demostración: jsfiddle.net/NGj7F/