Search code examples
javascriptjqueryscrollmousewheel

Smooth horizontal scroll bound to mousewheel


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

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