如何在鼠标滚轮上滚动水平滚动？

Question

刚才,我不小心偶然发现了http://www.benekdesign.com/.在鼠标滚轮上滚动它执行水平滚动.说真的,我不喜欢这个功能.这有点刺激.但是,请告诉我如何实现同样的目标.

编辑

哇,萤火虫说他正在使用

/*水平微小滚动 - 水平网站的平滑滚动脚本2(垂直"Tiny Scrolling"的兄弟)3 Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/horizo​​ntal-tiny - 滚动 4 v0.6 - 2007年2月14日

Answer 1

看起来他只是将鼠标滚轮事件映射到滚动区域.在IE中,只需使用该doScroll()方法就可以轻松实现- 这将按垂直条通常滚动的数量滚动水平条.其他浏览器不支持该doScroll()方法,因此您必须使用任意数量的滚动:

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

Answer 2

由于以上解决方案对我不起作用,我刚刚找到另一个解决方案:http: //css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

示例:http: //digwp.com/archives/horz/

Answer 3

另一种形式：

document.addEventListener('wheel', (e) => {
    document.getElementById('scroll_container').scrollLeft += e.deltaY;
})