本文详解如何使用JavaScript实现鼠标滑轮控制页面左右滚动。重点解决IE、Firefox和Chrome三者在滚轮事件（onmousewheel、DOMMouseScroll、mousewheel）及返回值（detail与wheelDelta）上的差异，并处理Chrome下scrollLeft获取的兼容性问题。
实现鼠标滑轮控制横向滚动的背景与挑战
页面默认布局为横向，因此底部存在水平滚动条而垂直方向无滚动条。现需实现通过鼠标滚轮控制页面左右滑动的功能，这需要编写特定的JavaScript代码，但在开发过程中遇到了诸多挑战。
在IE、Firefox和Chrome三个主流浏览器中，支持滚轮控制的函数存在显著差异，导致兼容性问题较为复杂。
不同浏览器的滚轮事件与返回值差异
以下关键知识点需明确：首先是监控滚轮事件，IE浏览器使用onmousewheel事件，Firefox浏览器使用DOMMouseScroll事件，而Chrome浏览器则使用mousewheel事件。其次是滚动返回值的差异：Firefox通过detail属性返回±3的值，其他浏览器则通过wheelDelta属性返回±120的值。开发者需根据这些返回值来判断滚动的方向。
Chrome浏览器滚动位置获取的兼容性处理
此外，在获取页面水平滚动距离时，除Chrome浏览器外，其他浏览器通常使用document.documentElement.scrollLeft；然而，Chrome浏览器需要使用document.body.scrollLeft来获取正确的滚动位置。
以下是具体的实现代码：
JavaScript实现代码示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="test" style="width:3000px; height:500px; background:#666;"></div>
<script language="javascript">
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);
}
</script>
</body>
</html>
该代码在Chrome浏览器下存在一个已知问题：只有当鼠标指针位于灰色内容区域内时，滑动功能才生效。目前该问题尚未解决，若有高手知晓解决方案，欢迎留言告知。