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

Question

刚才，偶然地，我偶然发现了http://www.benekdesign.com/。在这里，通过鼠标滚轮滚动可以执行水平滚动。说真的，我不喜欢这个功能。有点烦人。但是，请告诉我如何实现相同的目标。已编辑好吧，萤火虫说他在用/ *水平微型滚动-用于水平网站2（垂直“微型滚动”的兄弟）3的平滑滚动脚本Marco Rosella提供-http: //www.centralscrutinizer.it/zh-CN/design/js-php/horizontal-tiny -scrolling 4 v0.6- 2007年2月14日

Answer 1

看来他只是将mousewheel事件映射到滚动区域。在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

另一种形式：

document.addEventListener('wheel', (e) => {

    document.getElementById('scroll_container').scrollLeft += e.deltaY;

})