How to scroll the horizontal scrollbar in an iFrame from the parent frame?

Is there any cross browser way to scroll the horizontal scroll bar of an IFrame with super wide content with Javascript inside the parent frame. Also I need it to be attached to the mouse wheel event.

Answer (please look at Marcel Korpel documentation bellow for details)

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);
};

Marcel Korpel

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>&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>

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.

来源：https://stackoverflow.com/questions/2903500/how-to-scroll-the-horizontal-scrollbar-in-an-iframe-from-the-parent-frame