<iFrame> synchronized scrolling

Discussion in 'Web Design and Development' started by elppa, May 19, 2009.

  1. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #1
    Is there anyway to get two iFrames on a page to scroll in sync?

    Both of these <iframes> are displaying content from different servers to the one the page is running on.

    Have tried this, works in Safari, sadly firefox won't allow permission to set the onscroll property.
    Code:
    window.onload = function() {
               var frame1Document = document.getElementById('myIframe1').contentDocument;
               var frame2Document = document.getElementById('myIframe2').contentDocument;
               
               frame1Document.onscroll = function() {
                   //console.log("scroll from frame 1");
                   syncScroll(frame1Document, frame2Document);
               }
               
               frame2Document.onscroll = function() {
                   //console.log("scroll from frame 2");
                   syncScroll(frame2Document, frame1Document);
               }
               
               
               function syncScroll(controllerDocument, targetDocument) {
                   targetDocument.body.scrollTop = controllerDocument.body.scrollTop;
                   targetDocument.body.scrollLeft = controllerDocument.body.scrollLeft;
               }
            }
    
    I have exhausted usual channels, if anyone has any other ideas it would be much appreciated.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    From what I'm reading, Firefox does support the onscroll event. For the two lines near the top of the code you have,
    PHP:
    var frame1Document document.getElementById('myIframe1').contentDocument;
    var 
    frame2Document document.getElementById('myIframe2').contentDocument;
    Instead, try,
    PHP:
    var frame1Document document.getElementById('myIframe1');
    var 
    frame2Document document.getElementById('myIframe2');
     

Share This Page