是否有跨浏览器的方式来滚动具有超宽内容的 IFrame 的水平滚动条，并在父框架内使用 Javascript。我还需要将它附加到鼠标滚轮事件。
答案(请参阅下面的 Marcel Korpel 文档了解详细信息)
var myIframe = document.getElementById("iframeWithWideContent");
myIframe.onload = function () {
var mouseWheelEvt = function (e) {
var event = e || window.event;
if(event.wheelDelta)
var d = 1;
else
var d = -1;
// the first is for Gecko, the second for Chrome/WebKit
var scrEl = this.parentNode || event.target.parentNode;
if (document.body.doScroll)
document.body.doScroll(event.wheelDelta>0?"left":"right");
else if ((event.wheelDelta || event.detail) > 0)
scrEl.scrollLeft -= d*60;
else
scrEl.scrollLeft += d*60;
event.preventDefault();
return false;
};
if ("onmousewheel" in this.contentWindow.document)
this.contentWindow.document.onmousewheel = mouseWheelEvt;
else
this.contentWindow.document.body.addEventListener("DOMMouseScroll", mouseWheelEvt, true);
};
最佳答案
您的示例至少有两处错误:
if ("iframeWithWideContent" in document.body){
document.body.onmousewheel = mouseWheelEvt;
}else{
document.body.addEventListener("DOMMouseScroll", mouseWheelEvt);
}
在这里，您测试 document.body 中是否存在 iframeWithWideContent，并根据该条件使用 ...onmousewheel 或 ...addEventListener。这些是完全不相关的。此外，addEventListener需要一个额外的参数。
如the answer您链接到描述，Firefox 不支持 onmousewheel (无论如何它都是非标准的)，因此您应该检测该属性是否存在:
if ("onmousewheel" in document.body)
document.body.onmousewheel = mouseWheelEvt;
else
document.body.addEventListener("DOMMouseScroll", mouseWheelEvt, true);
以防万一您不知道，这(或多或少)是 feature detection 的正确方法。 (事实上，我应该在应用之前测试 DOMMouseScroll 是否可用)。
根据this answer , contentWindow 是 iframe 的窗口对象。
更新:我制作了另一个测试用例并让它在 Firefox 和 Chrome 中运行(它可能也可以在其他基于 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>
和 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>
我仅在 Firefox 3.6.3 和 Chromium 5.0.342.9 中测试了这一点，两者都在 Linux 上运行。为了防止 Chrome 中出现错误(关于从不同域访问 iframe 或使用不同协议(protocol))，您应该上传这些文件或使用本地测试服务器 (localhost)。
还有一个旁注:我非常怀疑这是否适用于每个(主要)浏览器。至少在(高度符合标准的)Opera 中不是这样。
更新 2:在进一步测试中，Firefox 和 Chrome 中的滚动方向相反。我根据 Mohammad 的建议相应地调整了我的代码。
我也在 IE 7 中对此进行了测试，但是，尽管 IE 支持 onmousewheel事件，它无法正常工作。此时我有点无聊，所以也许我会再次尝试将该示例改编为 IE。
关于javascript - 如何从父框架滚动 iFrame 中的水平滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2903500/