How to do a horizontal scroll on mouse wheel scroll?

谁说我不能喝 提交于 2019-11-26 13:17:45
Andy E

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

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;
})
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!