2016-02-29 207 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”