Question

是否有任何跨浏览器方式在父框架内使用Javascript滚动具有超宽内容的IFrame的水平滚动条。此外，我需要它附加到鼠标滚轮事件。

回答（详情请查看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);
};

Answer 1

您的示例至少有两个问题：

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是否可用）。< / p>

根据this answer，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中的滚动方向相反。我使用穆罕默德的建议相应调整了我的代码。

我也在IE 7中对此进行了测试，但是，尽管IE支持onmousewheel个事件，但它无法正常工作。在这一点上，我有点无聊，所以也许我会尝试再次将这个例子改编为IE。

如何从父框架滚动iFrame中的水平滚动条？

1 个答案: