There are at least two things wrong with your example:
if ("iframeWithWideContent" in document.body){
document.body.onmousewheel = mouseWheelEvt;
}else{
document.body.addEventListener("DOMMouseScroll", mouseWheelEvt);
}
Here you test for iframeWithWideContent being present in document.body and you rely on that condition to use either …onmousewheel or …addEventListener. These are completely unrelated. Moreover, addEventListener requires an extra argument.
As the answer you link to describes, Firefox doesn't support onmousewheel (it's non-standard anyway), so you should detect whether that property is present or not:
if ("onmousewheel" in document.body)
document.body.onmousewheel = mouseWheelEvt;
else
document.body.addEventListener("DOMMouseScroll", mouseWheelEvt, true);
Just in case you didn't know, this is (more or less) the right way of feature detection (in fact, I should have tested if DOMMouseScroll was available before applying it).
According to this answer, contentWindow is the iframe's window object.
Update: I made another test case and got it working in Firefox and Chrome (it probably works in other WebKit-based browsers, too).
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>
And 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>
I only tested this in Firefox 3.6.3 and Chromium 5.0.342.9, both running on Linux. To prevent errors in Chrome (about accessing iframes from a different domain or using a different protocol), you should upload these files or use a local test server (localhost).
One more side note: I highly doubt this will work in every (major) browser. At least it doesn't in (the highly standards compliant) Opera.
Update 2: On further testing the scrolling directions in Firefox and Chrome were opposite. I adjusted my code accordingly, using Mohammad's suggestions.
I also tested this in IE 7, but, although IE supports onmousewheel events, it didn't work properly. At this point I'm a little bored, so maybe I'll try to adapt the example to IE another time.
