鼠标横向滚动事件

本文介绍了一种使用JavaScript实现的横滚监听方案,通过监听不同浏览器的滚轮事件(如DOMMouseScroll和mousewheel),实现了水平滚动的效果。该方案兼容Firefox、Chrome等主流浏览器,并提供了一段完整的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//横向监听滚轮事件
var dbody=document.getElementById('test');
//ff用
objAddEvent(document,'DOMMouseScroll', function(e){return mouse_scroll(e);})

//非ff chrome 用
objAddEvent(document,'mousewheel', function(e){return mouse_scroll(e);})

//chrome用
objAddEvent(dbody,'mousewheel', function(e){return mouse_scroll(e);})
function mouse_scroll(e){
    e=e || window.event;
    var delD=e.wheelDelta?e.wheelDelta: -e.detail*40;//判断上下方向
    var move_s=delD>0?-50:50;
    document.documentElement.scrollLeft+=move_s; //非chrome浏览器用这个
//chrome浏览器用这个
    if(document.documentElement.scrollLeft==0)document.body.scrollLeft+=move_s;

    return false;
}
//这个是给对象增加监控方法的函数
function objAddEvent(oEle, sEventName, fnHandler)
{
    if(oEle.attachEvent) oEle.attachEvent('on'+sEventName, fnHandler);
    else oEle.addEventListener(sEventName, fnHandler, false);
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值