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

Just now, accidentally, i stumble upon http://www.benekdesign.com/ . Here on mouse wheel scroll it performs horizontal scroll. ~~Truly speaking i didn't like this feature. It was a bit irritating. But still,~~ Please tell me how to achieve the same.

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

Edited

编辑

Okay, firebug says he is using

哇，萤火虫说他正在使用

/* Horizontal Tiny Scrolling - a smooth scrolling script for horizontal websites 2(the brother of the vertical "Tiny Scrolling") 3by Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/horizontal-tiny-scrolling 4 v0.6 - February 14, 2007

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

3 个解决方案

#1

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:

看起来他只是将鼠标滚轮事件映射到滚动区域。在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);

3 个解决方案

#1

更多相关文章

随机推荐