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:

My code as below:

My "body" CSS as below:

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

For right now the code that I doubt is:

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 the @TooJuniorToCode's answer. The code is way shorter and it might be 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:

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

文章来源: jQuery Mousewheel Scroll Horizontally