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.

回答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.

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

    });

回答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/

回答4:

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

来源：https://stackoverflow.com/questions/23952491/jquery-mousewheel-scroll-horizontally

标签

jquery

html

css

mousewheel