我有一个项目,在我想要快速平滑滚动。我试过lot,我找到了一些解决方案。但当我一次多次旋转鼠标滚轮时,它们都不能平滑地滚动,最后一次旋转鼠标滚轮变得平滑。经过大量的搜索,我得到了一个我想要的例子。但是我不知道js函数是什么。Here is the example。我不想使用任何插件,因为我已经在我的项目中使用了太多插件,而且对于这个项目来说,加载太慢了。是否可以只使用Jquery或纯javascript?
发布于 2016-02-29 15:04:56
这不是我的解决方案,但我认为它是合适的和相当整洁的,所以我只是复制粘贴它:
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/
附言:这是在谷歌上用“平滑鼠标滚动css”搜索1分钟后发现的。
https://stackoverflow.com/questions/35702469
复制相似问题