jQuery pionowe kółko myszy gładko przewijane

Question

Robię stronę paralaksy i chciałbym, aby przewijanie strony było gładsze za pomocą kółka myszy dla lepszego komfortu użytkownika. Najlepszym przykładem, jaki mogłem uzyskać, była ta strona: http://www.milwaukeepolicenews.com/#menu=home-page Byłoby wspaniale, gdybym mógł dostać coś podobnego do tego na mojej stronie internetowej, płynne przewijanie w pionie i przewijanie bezwładności.

Zauważyłem, że używają koła myszy jQuery Brandona Aarona, które jest bardzo lekkie, ale jestem tylko początkującym i nie mogę zrobić tego samemu.

Również zauważyłem to w swoich 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; 
    }) 

Dziękujemy!

EDIT

Jestem prawie na miejscu. Spójrz na to skrzypce: http://jsfiddle.net/gmelcul/cZuym/ Trzeba tylko dodać metodę łagodzenia, aby przewijać, tak jak na stronie Milwaukee Police.

Answer 1

Oto dwa jsfiddles - jeden ze skryptem i jeden bez niego, dzięki czemu można porównać:

• with script
• without script

JavaScript używając 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; 
    }) 
}); 

Porównaj dwa. Z tego co wiem, skrypt spowalnia kółko myszy, więc wymaga więcej fizycznego skrętu, aby przewinąć tę samą odległość, co bez skryptu. Może się wydawać, że jest gładszy ze względu na wolniejsze przewijanie (i może rzeczywiście być gładszy, ponieważ prawdopodobnie jest łatwiejszy w przypadku jednostki graficznej).

Answer 2

Zapoznaj się z skrollr. Jest to wtyczka do tworzenia efektu paralaksy. Posiada opcje podczas inicjalizacji wtyczki, aby włączyć płynne przewijanie:

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

Answer 3

znalazłem tej wtyczki, ma kilka ciekawych opcji i działa na wszystkich głównych urządzeń http://areaaperta.com/nicescroll/

Answer 4

hej mam innego Ressource tutaj co jest naprawdę prosty w użyciu smoothwheel

Umożliwia płynne przewijanie animacji na kółku myszy na każdym urządzeniu i działa idealnie!

Answer 5

Wiem, że to bardzo stary post, ale tutaj jest to dobre rozwiązanie zrobiłem:

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

testu to: http://jsfiddle.net/y4swj2ts/3/