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.

Muslin

Have a look at css-tricks.com/examples/HorzScrolling & css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel – Paniculate

@VedantTerkar Hello Vedant, I'm actually refer to the second link you provided to me. The question I'm asking is my scrolling smoothness, why does my mouse scroll stopped or jammed somewhere in the middle of my website. – Muslin

Out of interest, why are you loading like 3 instances of jQuery? – Arreola

@J.B. I know is not recommended, but that's make my whole website works except for the Mouse Scrolling Code, so I think is crashed with something which I couldn't figure it out... Any advice ? – Muslin

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.

Muslin

Would you be so kind as to post a demo of this so I can see it working in action? – Anus

@Anus check the url in comment of the code .. it has demo and detail explanation. click here – Tea

It works for me, thanks a lot... now, I would like to scroll smoothly. I used butter.js before and it worked on another website, but not this one. If there is a way to integrate in these codes a smooth effect ? – Karena

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

    });

Sulfurous

I made event.preventDefault(); first thing before that variable declaration and it was perfect – Husbandman

Answer 3

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

Cato

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/

Zitella

Yes the code is working, appreciated for your answer. If you look at my code clearly you will know that I'm actually using those coding script. My problem is... again... the scrolling smoothness, my scrolling keep jammed and stopped. This is my problem. – Muslin

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

Inductor

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

Crosseye

.mousewheel is not a function. Perhaps the answer is incomplete. – Tasset