jQuery Mousewheel Scroll Horizontally

Question

I\'m currently developing a horizontally website that can enable my mouse scroll to scroll to the left and right...

My jQuery included sequence:

<         


        

Answer 1

After 3 days of searching for the answer, I finally found a solution without the Jquery plugins!

// http://www.dte.web.id/2013/02/event-mouse-wheel.html
(function() {
function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.documentElement.scrollLeft -= (delta*40); // Multiplied by 40
    document.body.scrollLeft -= (delta*40); // Multiplied by 40
    e.preventDefault();
}
if (window.addEventListener) {
    // IE9, Chrome, Safari, Opera
    window.addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
    // IE 6/7/8
    window.attachEvent("onmousewheel", scrollHorizontally);
}
})();

If this code still won't work, the problem is not here, it's in your CSS.

Answer 2

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

Chrome has the scroll on the body, Firefox has the scroll on the html

Answer 3

This is a JQuery version of @TooJuniorToCode's answer. It's shorter and ideal if you're already using jQuery. Hope it's useful for someone.

    $('body').on('mousewheel DOMMouseScroll', function(event){

        var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail)));

        $(this).scrollLeft( $(this).scrollLeft() - ( delta * 40 ) );
        event.preventDefault();

    });

Answer 4

To scroll website horizontally please follow below code:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

Attached mouse wheel event to body:

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});

See demo:

http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/