CODEWITHSUNDEEP
jqueryhtmlcssmousewheel
TooJuniorToCode
TooJuniorToCode

Reputation: 568

jQuery Mousewheel Scroll Horizontally

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.

Upvotes: 13

Views: 34584

Answers (6)

dukevin
dukevin

Reputation: 23198

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

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

Upvotes: 0

jklaze
jklaze

Reputation: 175

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

Upvotes: 4

Erick Monta&#241;ez
Erick Monta&#241;ez

Reputation: 447

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

    });

Upvotes: 14

TooJuniorToCode
TooJuniorToCode

Reputation: 568

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.

Upvotes: 26

Stanescu Gheorghe
Stanescu Gheorghe

Reputation: 21

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

Upvotes: -1

Systematix Infotech
Systematix Infotech

Reputation: 2365

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/

Upvotes: 3

Related Questions