如何在鼠标滚轮滚动上进行水平滚动? [英] How to do a horizontal scroll on mouse wheel scroll?

问题描述

刚才，我偶然发现了 http://www.benekdesign.com/ .在鼠标滚轮滚动时，它执行水平滚动.老实说我不喜欢这个功能.这有点令人恼火.但是， 请告诉我如何实现相同的目标.

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.

已编辑

好的，萤火虫说他正在使用

Okay, firebug says he is using

/* Horizo​​ntal Tiny Scrolling - 水平网站的平滑滚动脚本2(竖版《Tiny Scrolling》的兄弟)3by Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/horizo​​ntal-tiny-scrolling4 v0.6 - 2007 年 2 月 14 日

/* 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

推荐答案

看起来他只是在映射 鼠标滚轮事件滚动区域.在 IE 中，这真的很容易，只需使用 doScroll() 方法 - 这将按垂直条通常滚动的量滚动水平条.其他浏览器不支持 doScroll() 方法，因此您必须忍受任意数量的滚动:

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

这篇关于如何在鼠标滚轮滚动上进行水平滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！