2014-11-02 384 views
2

除了正常的鼠標滾動速度之外,我想讓它更慢,更順暢,並且與現代瀏覽器中的一致。平滑滾動鼠標滾輪?

我已經嘗試使用NiceScroll(https://nicescroll.areaaperta.com/)這樣的插件。

但安裝之後,出於某種原因它會發生溢出:隱藏;在我的內容上,不能在任何地方滾動。我不需要任何自定義設計的滾動條。我只需要滾動更順暢使用鼠標滾動或垂直滾動​​條的時候是這樣的:

http://pervolo.com/

會有人請賜教這件事嗎?我打算使用skrollr插件(https://github.com/Prinzhorn/skrollr)以及平滑滾動。

回答

5

一些元素,這可能讓你去:

$(window).on('mousewheel DOMMouseScroll', function(e) { 
    var dir, 
     amt = 100; 

    e.preventDefault(); 
    if(e.type === 'mousewheel') { 
    dir = e.originalEvent.wheelDelta > 0 ? '-=' : '+='; 
    } 
    else { 
    dir = e.originalEvent.detail < 0 ? '-=' : '+='; 
    }  

    $('html, body').stop().animate({ 
    scrollTop: dir + amt 
    },500, 'linear'); 
}) 

DOMMouseScrolle.originalEvent.detail是Firefox所必需的。將amt更改爲您希望的滾動距離,並將500更改爲您希望的滾動速度。

小提琴:http://jsfiddle.net/utcsdyp1/1

+0

謝謝你的回答。 :) – Pau 2014-11-02 17:11:14

+0

頁面結束時出現一些錯誤:(特別是當速度比amt小時 – 2014-12-01 10:20:37

+0

@mohsensolhnia,我嘗試了速度和'amt'的不同值,但是我沒有看到任何錯誤。從你的控制檯,讓我知道你使用什麼瀏覽器? – 2014-12-01 13:57:20

0

可以使用,當用戶滾動$(element).on("scroll", handler),然後使用捕獲一個動作,例如該代碼

$('html, body').animate({ 
    scrollTop: $("#target-element").offset().top 
}, 1000); 

滾動使用jQuery的

+0

我知道。我已經在使用我自己的那個代碼版本。我需要的是沒有一個目標元素。如果您已經看到了上面的網站:http://pervolo.com/,我的意思是當使用鼠標滾動時,有這種平滑的效果,而不是跳動的默認瀏覽器之一。 – Pau 2014-11-02 15:40:31

+0

您可以防止頁面滾動,而不是在特定數量的像素上滾動文檔 – rberla 2014-11-02 16:00:06

+0

我該如何做到這一點?你能編輯你的答案,讓我知道它是如何工作在jQuery代碼?謝謝。 :) – Pau 2014-11-02 16:04:12