jQuery Mousewheel Scroll Horizontally
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.
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/
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();
});