1

是否有任何跨浏览器方式来滚动具有超宽内容的 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);
};
4

1 回答 1

1

您的示例至少有两点错误：

if ("iframeWithWideContent" in document.body){
  document.body.onmousewheel = mouseWheelEvt;
}else{
  document.body.addEventListener("DOMMouseScroll", mouseWheelEvt);
}

在这里，您测试iframeWithWideContent是否存在于 document.body 中，并且您依靠该条件来使用…onmousewheelor …addEventListener。这些是完全不相关的。此外，addEventListener需要一个额外的参数。

正如您链接到的答案所描述的那样，Firefox 不支持 onmousewheel （无论如何它都是非标准的），因此您应该检测该属性是否存在：

if ("onmousewheel" in document.body)
  document.body.onmousewheel = mouseWheelEvt;
else
  document.body.addEventListener("DOMMouseScroll", mouseWheelEvt, true);

以防万一您不知道，这（或多或少）是正确的特征检测方法（实际上，我应该在应用之前测试DOMMouseScroll是否可用）。

根据这个答案，contentWindow是 iframe 的窗口对象。

更新：我做了另一个测试用例，让它在 Firefox 和 Chrome 中运行（它可能也适用于其他基于 WebKit 的浏览器）。

iframescrolling.html：

<!DOCTYPE html>
<html>
 <head>
  <meta charset=utf-8>
  <title>&lt;iframe&gt; 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 或使用不同协议），您应该上传这些文件或使用本地测试服务器 (localhost)。

另一个旁注：我非常怀疑这是否适用于每个（主要）浏览器。至少它不在（符合高度标准的）Opera 中。

更新 2：在进一步测试 Firefox 和 Chrome 中的滚动方向是相反的。我使用 Mohammad 的建议相应地调整了我的代码。

我也在 IE 7 中对此进行了测试，但是，尽管 IE 支持鼠标滚轮事件，但它不能正常工作。在这一点上我有点无聊，所以也许我会尝试将这个例子再次适应 IE。

于 2010-05-25T11:04:13.623 回答