Ich habe heute etwas gemacht, daher gab es unten eine horizontale Bildlaufleiste. Jetzt musste das Mausrad nach links und rechts scrollen. Dies erfordert das Schreiben von JS-Code, um dies zu erreichen. Beim Schreiben sind große Probleme aufgetreten
Die von den drei Browsern Firefox und Chrome unterstützten Funktionen sind völlig unterschiedlich, es ist wirklich verrückt.
Hier ein paar Wissenspunkte zur Erläuterung
Überwachen Sie Riemenscheibenereignisse
dh:onmousewheel
firfox:DOMMouseScroll
chrome:mousewheel
Wow, ich bin wirklich sprachlos
Auch der Rückgabewert beim Scrollen ist unterschiedlich
firfox verwendet Details, um -3
zurückzugeben
Andere verwenden WheelDelta, um -120
zurückzugeben
Es gibt einen Rückgabewert, um die Scrollrichtung zu bestimmen
Außer Chrome gibt es auch allgemeine Browser, die document.documentElement.scrollLeft
verwenden, um die Linksbewegung der Seite zu bestimmen.
Der Chrome-Browser muss jedoch document.body.scrollLeft
Der Code wird wie folgt geteilt:
<!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>
Es gibt tatsächlich ein Problem mit diesem Code. Die Maus kann nur dann verschoben werden, wenn sie im grauen Bereich platziert ist. Wenn ein Experte es löst, hinterlassen Sie bitte eine Nachricht Lass es mich wissen. Danke.
