2016-02-29 311 views
0

我有一個項目,我希望快速平滑滾動。我嘗試了很多,我找到了一些解決方案。但是,當我一次多次旋轉鼠標滾輪並且鼠標滾輪的最後一次旋轉變得平滑時,它們都無法順暢滾動。經過大量的搜索,我得到了我想要的例子。但我無法弄清楚什麼是js函數。 Here is the example。我不想使用任何插件,因爲我已經在我的項目中使用了太多的插件,因此它的加載非常緩慢。是隻有JQuery或純JavaScript的可能嗎?快速平滑滾動鼠標滾輪

回答

1

這不是我的解決方案,但我認爲這是件漂亮整潔的,所以我將只是複製粘貼:

jQuery.extend(jQuery.easing, { 
    easeOutQuint: function(x, t, b, c, d) { 
    return c * ((t = t/d - 1) * t * t * t * t + 1) + b; 
    } 
}); 

var wheel = false, 
    $docH = $(document).height() - $(window).height(), 
    $scrollTop = $(window).scrollTop(); 

$(window).bind('scroll', function() { 
    if (wheel === false) { 
    $scrollTop = $(this).scrollTop(); 
    } 
}); 
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) { 
    delta = delta || -e.originalEvent.detail/3 || 
    e.originalEvent.wheelDelta/5; //edit this to your needs - the higher the slower 
    wheel = true; 

    $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30))); 
    $($.browser.webkit ? 'body' : 'html').stop().animate({ 
    scrollTop: $scrollTop + 'px' 
    }, 2000, 'easeOutQuint', function() { 
    wheel = false; 
    }); 
    return false; 
}); 

這將覆蓋滾動事件的默認行爲。
來源和完整學分小提琴用戶Szar - 小提琴:https://jsfiddle.net/Szar/xmkwa8ft/

P.S.這發現在1分鐘的谷歌搜索使用術語「平滑鼠標滾動CSS」