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

查看:139
本文介绍了如何在鼠标滚轮上进行水平滚动?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

就在不经意间,我偶然发现了 http://www.benekdesign.com/ 。在鼠标滚轮上,它执行水平滚动。真正的说我不喜欢这个功能。这有点刺激。但是,请告诉我如何达到同样的效果。

编辑



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



/ *水平微小滚动 - 水平网站的平滑滚动脚本
2(垂直微小滚动的兄弟)
3由Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/ horizo​​ntal-tiny-scroll
4 v0.6 - 2007年2月14日他只是将滚轮事件映射到滚动区域。在IE中,通过使用 doScroll()方法,这非常简单 - 这将使水平条滚动垂直条通常滚动的数量。其他浏览器不支持 doScroll()方法,所以您必须使用任意数量的滚动来代替:

  var mouseWheelEvt = function(event){
if(document.body.doScroll)
document.body.doScroll(event.wheelDelta> 0?left :对);
else if((event.wheelDelta || event.detail)> 0)
document.body.scrollLeft - = 10;
else
document.body.scrollLeft + = 10;

返回false;
}
document.body.addEventListener(mousewheel,mouseWheelEvt);


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.

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

解决方案

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆