Il y a au moins deux choses mal avec votre exemple:
if ("iframeWithWideContent" in document.body){
document.body.onmousewheel = mouseWheelEvt;
}else{
document.body.addEventListener("DOMMouseScroll", mouseWheelEvt);
}
Ici vous test pour iframeWithWideContent être présent dans document.body et vous comptez sur cette condition pour utiliser soit …onmousewheel ou …addEventListener. Ce sont complètement indépendants. En outre, addEventListener nécessite un argument supplémentaire.
Comme the answer vous un lien vers décrit, Firefox ne supporte pas OnMouseWheel (il est non standard de toute façon), vous devez donc détecter si cette propriété est présente ou non:
if ("onmousewheel" in document.body)
document.body.onmousewheel = mouseWheelEvt;
else
document.body.addEventListener("DOMMouseScroll", mouseWheelEvt, true);
Juste au cas où vous n » Je sais, c'est (plus ou moins) la bonne façon de feature detection (en fait, j'aurais dû tester si DOMMouseScroll était disponible avant de l'appliquer).
Selon this answer, contentWindow est l'objet de fenêtre iframe.
Mise à jour: J'ai fait un autre cas de test et l'ai fait fonctionner dans Firefox et Chrome (cela fonctionne probablement aussi dans d'autres navigateurs basés sur WebKit).
iframescrolling.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title><iframe> horizontal scrolling test</title>
<style>
* { padding: 0; margin: 0; border: 0 }
#large { background: #aaa; height: 5000px; width: 5000px }
</style>
</head>
<body>
<iframe id="iframeWithWideContent" src="iframecontent.html" width="500" height="300"></iframe>
<div id="large"></div>
<script>
var myIframe = document.getElementById("iframeWithWideContent");
myIframe.onload = function() {
var mouseWheelEvt = function (e) {
var event = e || window.event;
// the first is for Gecko, the second for Chrome/WebKit;
var scrEl = this.parentNode || event.target.parentNode;
if(event.wheelDelta)
var d = 60;
else
var d = -60;
if (document.body.doScroll)
document.body.doScroll(event.wheelDelta>0?"left":"right");
else if ((event.wheelDelta || event.detail) > 0)
scrEl.scrollLeft -= d;
else
scrEl.scrollLeft += d;
event.preventDefault();
return false;
};
if ("onmousewheel" in this.contentWindow.document)
this.contentWindow.document.onmousewheel = mouseWheelEvt;
else
this.contentWindow.document.body.addEventListener("DOMMouseScroll", mouseWheelEvt, true);
};
</script>
</body>
</html>
Et iframecontent.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>iframe</title>
<style>
* { padding: 0; margin: 0; border: 0 }
#long { background: #ccc; height: 500px; width: 5000px }
</style>
</head>
<body>
<div id="long">long 5000px div</div>
</body>
</html>
Je ne testé cela dans Firefox 3.6.3 et Chrome 5.0.342.9, à la fois sur Linux. Pour éviter les erreurs dans Chrome (à propos de l'accès aux iframes à partir d'un domaine différent ou à l'aide d'un protocole différent), vous devez télécharger ces fichiers ou utiliser un serveur de test local (localhost).
Une note de plus: je doute fortement que cela fonctionne dans tous les (principaux) navigateurs. Au moins, il n'est pas (conforme aux normes) Opera.
Mise à jour 2: Lors d'autres tests, les directions de défilement dans Firefox et Chrome étaient opposées. J'ai ajusté mon code en conséquence, en utilisant les suggestions de Mohammad.
J'ai également testé cela dans IE 7, mais, bien que IE supporte onmousewheel événements, il ne fonctionnait pas correctement. À ce stade, je m'ennuie un peu, alors peut-être que je vais essayer d'adapter l'exemple à IE une autre fois.
Marcel Korpel, vous êtes un génie! Cela fonctionne parfaitement et nous pouvons excuser Opera pour le moment:) J'ai ajouté une petite mise à jour à votre code qui corrige les directions entre les navigateurs firefox et chrome (parce que le scroll se déplace dans des directions opposées avec le même mouvement de la molette). J'ai ajouté le code mis à jour à la question. Veuillez mettre à jour votre réponse et je la marquerai comme correcte! :) – Mohammad