绑定到鼠标滚轮的平滑水平滚动

Question

这是一个使用鼠标滚轮的水平滚动的工作示例，但它不能平滑地滚动。我说的流畅，是指像Firefox或Opera中的普通垂直滚动。

$(function() {
    $("html, body").mousewheel(function(event, delta) {
        this.scrollLeft -= (delta * 30);
        event.preventDefault();
    });
});

(http://brandonaaron.net/code/mousewheel/docs)

我制作了一个现场演示来演示这一点。http://jsfiddle.net/Dw4Aj/

我想让这个卷轴像垂直的那样工作，既有鼠标滚轮，又有流畅度。

有人能帮我吗？

Answer 1

我就把这个留在这里吧。

http://jsfiddle.net/Dw4Aj/19/

jQuery(document).ready(function($) {
$("html, body").mousewheel(function(e, delta) { 
    $('html, body').stop().animate({scrollLeft: '-='+(150*delta)+'px' }, 200, 'easeOutQuint');
    e.preventDefault();
});

});

Answer 2

平滑滚动是特定于浏览器的功能。

如果你想要在所有人身上都能工作的东西，那么你需要在你这一边做。jQuery有多种平滑滚动的实现。

实际上，你甚至可能需要所谓的动态滚动。如果是这样的话，试试jquery.kinetic

Answer 3

我第一个想到的就是记住上次滚动事件的时间戳，玩着轻松的功能，得到好的效果http://jsfiddle.net/oceog/Dw4Aj/13/

$(function() {

    $("html, body").mousewheel(function(event, delta) {
        var mult = 1;
        var $this = $(this);
        if (event.timeStamp - $this.data('oldtimeStamp') < 1000) {
            //calculate easing here
            mult = 1000 / (event.timeStamp - $this.data('oldtimeStamp'));
        }
        $this.data('oldtimeStamp', event.timeStamp);
        this.scrollLeft -= (delta) * mult;
        event.preventDefault();
    });
});​