jquery vertical mousewheel scroll scrolling

Question

Sto facendo un sito Web di parallasse e vorrei far scorrere la pagina più agevolmente con la rotellina del mouse per una migliore esperienza utente. Il miglior esempio che ho potuto ottenere è stato questo sito web: http://www.milwaukeepolicenews.com/#menu=home-page Sarebbe bello se potessi ottenere qualcosa di simile a questo nel mio sito web, lo scorrimento verticale scorrevole e l'inerzia di scorrimento.

Ho notato che stanno usando la rotella di jQuery di Brandon Aaron che è molto leggera ma sono solo un principiante e non posso farlo funzionare da solo.

Inoltre ho notato questo nelle loro MPD-parallax.js:

jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){ 
     if(delta < 0) page.scrollTop(page.scrollTop() + 65); 
     else if(delta > 0) page.scrollTop(page.scrollTop() - 65); 
     return false; 
    }) 

Grazie!

EDIT

Sono quasi. Dai un'occhiata a questo violino: http://jsfiddle.net/gmelcul/cZuym/ Basta aggiungere un metodo di andamento per scorrere proprio come il sito web della Polizia di Milwaukee.

Answer 1

Qui ci sono due jsfiddles - uno con la sceneggiatura e una senza di essa in modo da poter confrontare:

• with script
• without script

JavaScript utilizzando il jQuery mousewheel plugin:

$(document).ready(function() { 
    var page = $('#content'); // set to the main content of the page 
    $(window).mousewheel(function(event, delta, deltaX, deltaY){ 
     if (delta < 0) page.scrollTop(page.scrollTop() + 65); 
     else if (delta > 0) page.scrollTop(page.scrollTop() - 65); 
     return false; 
    }) 
}); 

Confronta i due. Da quello che posso dire, lo script rallenta la rotellina del mouse in modo che richieda più giri fisici per scorrere alla stessa distanza che senza lo script. Potrebbe risultare più agevole a causa di uno scorrimento più lento (e potrebbe essere più agevole in quanto è probabilmente più semplice sull'unità grafica).

Answer 2

Check out skrollr. È un plugin per creare l'effetto di parallasse. Ha opzioni quando si inizializza il plugin per attivare lo scorrimento uniforme:

var s = skrollr.init({ 
    smoothScrolling: true, 
    smoothScrollingDuration: 1800 
}); 

Answer 3

Ho trovato questo plugin, ha alcune opzioni piacevoli e funziona su tutti i principali dispositivi http://areaaperta.com/nicescroll/

Answer 4

hey ho avuto un altro ressource qui che è davvero semplice da usare smoothwheel

Abilita un'animazione scroll scorrevole su rotellina del mouse su tutti i dispositivi e funziona perfettamente!

Answer 5

so che è un post molto vecchio, ma qui è una buona soluzione che ho fatto:

function handle(delta) { 
    var animationInterval = 20; //lower is faster 
    var scrollSpeed = 20; //lower is faster 

    if (end == null) { 
    end = $(window).scrollTop(); 
    } 
    end -= 20 * delta; 
    goUp = delta > 0; 

    if (interval == null) { 
    interval = setInterval(function() { 
     var scrollTop = $(window).scrollTop(); 
     var step = Math.round((end - scrollTop)/scrollSpeed); 
     if (scrollTop <= 0 || 
      scrollTop >= $(window).prop("scrollHeight") - $(window).height() || 
      goUp && step > -1 || 
      !goUp && step < 1) { 
     clearInterval(interval); 
     interval = null; 
     end = null; 
     } 
     $(window).scrollTop(scrollTop + step); 
    }, animationInterval); 
    } 
} 

prova è: http://jsfiddle.net/y4swj2ts/3/