Smooth horizontal scroll bound to mousewheel

Question

Here is a working example of horizontal scroll with mousewheel, but it does not scroll smoothly. By smoothly I mean like ordinary vertical scroll in Firefox or Opera.

<

Answer 1

Try to use your function in conjunction with .animate()

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

I just actually did this myself and it works. I created an instagram feed on the web application that I created, and the other plugins that I was using were breaking all too often:

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

Answer 2

I'm just going to leave this here.

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 3

Just change this:

this.scrollLeft -= (delta * 30);

to this:

this.scrollLeft -= (delta * 1);

Answer 4

1st i think about it is to remember last scroll event timestamp, play with easing function, to get good result 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 5

I found other nice solution - to use wrapper, so you scroll absolute to same position as you would to scroll vertical, it works if you just need scroll, no text selection or other(may be can work arounded, but i tired)

$(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/

i made another sample, now without wholescreen wrapper, and possibility to select http://jsfiddle.net/oceog/DcyWD/

Answer 6

Smooth scrolling is a browser specific feature.

If you want something that works on all of them then you need to do it on your side. There are multiple implementations of smooth scrolling for jQuery.

And actually you may even need so called kinetic scrolling. If so try jquery.kinetic