How to do a horizontal scroll on mouse wheel scroll?
As the solutions above does not work for me, here another one i just found: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
Example: http://digwp.com/archives/horz/
Another form:
document.addEventListener('wheel', (e) => {
document.getElementById('scroll_container').scrollLeft += e.deltaY;
})
It looks like he's just mapping the mousewheel event to scrolling the area. In IE, this is really easy by just using the doScroll()
method - this will scroll the horizontal bar by the amount the vertical bar would normally scroll by. Other browsers don't support the doScroll()
method, so you have to live with scrolling by an arbitrary amount instead:
var mouseWheelEvt = function (event) {
if (document.body.doScroll)
document.body.doScroll(event.wheelDelta>0?"left":"right");
else if ((event.wheelDelta || event.detail) > 0)
document.body.scrollLeft -= 10;
else
document.body.scrollLeft += 10;
return false;
}
document.body.addEventListener("mousewheel", mouseWheelEvt);