绑定到鼠标滚轮平滑水平滚动(Smooth horizontal scroll bound to mo

下面是使用鼠标滚轮水平滚动的工作示例，但并不顺利滚动。顺利通过我的意思是像在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:

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

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

而实际上你可能甚至需要所谓的动力学滚动。如果是这样的尝试jquery.kinetic

Answer 2:

第一个我想它是要记住最后的滚动事件的时间戳，以缓解功能发挥，取得好成绩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();
    });
});

Answer 3:

尝试使用.animate使用功能，它结合（）

$(function() {
    $("html, body").mousewheel(function(event, delta) {
        var scroll_distance = delta * 30
        this.animate(function(){
           left: "-=" + scroll_distance + "px",
        });
        event.preventDefault();
    });
});

我刚刚其实这个做我自己和它的作品。我创建了我创建的Web应用程序，而我是用被打破往往与其他插件的Instagram的饲料：

$('#add_instagram').on('mousewheel', function(e,d){
    var delta = d*10;
    $('#move_this').animate({
        top: "-=" + delta + "px"
    },3);
    e.preventDefault();
});

Answer 4:

我发现了其他很好的解决方案 - 使用的包装，所以你绝对滚动到相同的位置，你会滚动垂直，它的作品，如果你只需要滚动，没有文本选择或其他（可能是可以工作arounded，但我累了）

$(function() {

    var scroll = $('.scrollme');
    var h = scroll.parent().height();
    var w = scroll.parent().width();
    var t = scroll.offset().top;
    var l = scroll.offset().left;
    var vertscroll_wrap = $("<div>").height(h).width(10000).css('position', 'absolute').css('top', t).css('left', l).css('z-index', 10000).css('opacity', 0.5).css('overflow-y', 'scroll');
    var vertscroll = $('<div>').height(10000).css('width', '100%').css('opacity', 0.5);
    vertscroll_wrap.append(vertscroll);
    $('body').append(vertscroll_wrap);
    vertscroll_wrap.height('100%');
    vertscroll_wrap.scroll(function() {
        $(scroll).parent().scrollLeft($(this).scrollTop());
    });


});

http://jsfiddle.net/oceog/Dw4Aj/16/

我又样品，现在没有wholescreen包装，并可能选择http://jsfiddle.net/oceog/DcyWD/

Answer 5:

我只是要离开这里了这一点。

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();
});

});