编辑:测试时我发现这个程序有一个重大的漏洞。虽然我的版本比原始代码表现得更好(在我看来),但它不幸地没有考虑到其他滚动方式(滚动条/中键拖动)。用其中一种方法滚动,然后用鼠标滚轮滚动会导致它恢复到你上次滚动鼠标滚轮时的滚动位置。我将在开发解决方案时进行更新。
Kenny提供的解决方案是一个很好的方法,但它的功能让我抓狂。如果你快速滚动鼠标滚轮,它不会滚动得更快。
我改进了它,使得每次点击都可以滚动给定的距离,而不管鼠标滚轮的旋转速度如何。
他的答案之所以不行,是因为如果在第一次动画完成之前再次滚动鼠标滚轮,新的滚动高度只是当前滚动高度加上每次滚轮点击滚动的距离。(所以如果滚动时间为0.5秒,你在0.25秒后第二次滚动,那么它将滚动1.5倍的滚轮滚动距离,而不是2倍的距离)
现在已经很晚了,希望这有意义。
无论如何,这是我的代码:
所需库
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
滚动代码
<script>
$(function(){
var $window = $(window)
var $scoll = $('#page-container')
var scrollTime = 0.5
var scrollDistance = 120
var scrollTop = $scoll.scrollTop()
$window.on("mousewheel DOMMouseScroll", function(event){
event.preventDefault()
var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3
scrollTop = scrollTop - parseInt(delta*scrollDistance)
scrollTop = Math.max(0, Math.min($scoll[0].scrollHeight, scrollTop))
TweenMax.to($scoll, scrollTime, {
scrollTo : { y: scrollTop, autoKill:true },
ease: Power1.easeOut,
overwrite: 5
})
})
})
</script>