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.

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

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

I've made a live demo to demonstrate this. http://jsfiddle.net/Dw4Aj/

I want this scroll to work like the vertical one, both with mousewheel and smoothness.

Can someone help me?

Solution 1

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

});

Solution 2

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

Solution 3

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

Solution 4

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

View more solutions

Comments

[Daedalus]

Did you perchance test your demo in chrome? Not working for me.

[Vladimir Wood]

Thank you but this is not what I want, even not close. I just want horizontal scroll to work like the original one vertical scroll in Firefox or Opera.

[Daedalus]

None. The only thing I can really determine is that scrollLeft sometimes doesn't get set.

[Vladimir Wood]

It's working but very glitchy. I think that right answer is to use .animate to make it work properly.

[zb']

Hm, I checked with FF and chrome, works fine for me, but it may be because of my mouse,

[zb']

I would not suggest to use animation() you will take some new problems with it (animation stop/start, how to handle new events during animation, how to scroll by minimal possible delta)

[Jan]

Since you're doing it programatically, it most likely won't work like the native controls.

[c-smile]

@Vladimir Mikhalev As I said smooth scrolling is a browser specific feature. Google Chrome for example does not use smooth scrolling at all. So if you want to see smooth scrolling there and in all others and in the same manner you have to implement this manually or use some existing library for that.

[Vladimir Wood]

does not work, says "syntax error" here: left: -= (delta * 30);

[Brian Noah]

Try putting that in quotes: "-=(delta*30)px"

[Vladimir Wood]

Not working both ways, now it says "animate is not a function"

[Brian Noah]

Ok... Do $(this) instead of just "this"

[Vladimir Wood]

Sad, but I have nothing. Here is your script injected jsfiddle.net/Dw4Aj/17

[Brian Noah]

Here's a plugin that I created today. This might help: github.com/bjoshuanoah/scrollThis.js

[Pablo Armentano]

This isn't working on Chrome 46. Made small changes but here is an updated version that it's working fine. jsfiddle.net/Dw4Aj/338