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:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<!--jquery validation script-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

<!--Smooth Scroll-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

My code as below:

<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>


<script>
$.noConflict();

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

            event.preventDefault();
        })
    })

$(function() {...});

$(document).ready(function() {

        $('#form').validate({...});

        $("#submit").click(function()
        {...});
    })
</script>

My "body" CSS as below:

html {
width:100%;
overflow-y:hidden;
overflow-x: scroll;
}
body{

}

For right now the code that I doubt is:

<!--Smooth Scroll-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

which is crashing with the mouse scroll I think.

The mouse scroll is working, the only problem is the mouse scroll is not smooth, sometimes stop there, sometimes cant even move, is not my mouse problem. I'm not sure what's cause this because I tried to debug it for 2 days already. Anyone here to share their thoughts on this issue?

I been finding solution but it looked weird on my case. Scroll until a certain part and is jam at the middle. (Just the scrolling bar.) I'm using Chrome on Mac for testing. Btw is there any solution like AutoShift while scrolling because that's worked for me when I pressed Shift button.

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

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 3

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/

Answer 4

Update 2022 of @Erick A. Montañez's answer: the "mousewheel" and 'DOMMouseScroll' events are deprecated; You should use the new unified standard "wheel" event instead.

Example:

const scrollContainer = document.querySelector("main");

scrollContainer.addEventListener("wheel", (evt) => {
  evt.preventDefault();
  scrollContainer.scrollLeft += evt.deltaY;
});

Source: Scroll horizontally with mouse wheel: Vanilla JavaScript

Answer 5

window.scrollBy() is the function to use if you want to scroll incrementally

window.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    window.scrollBy(evt.deltaY, 0);
});

Answer 6

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