addEventListener在同步滾動2 div時無法在firefox中工作

我試圖同步屏幕上的2個div，並且出於某種原因，它不適用於Firefox。addEventListener在同步滾動2 div時無法在firefox中工作

沒有錯誤提出，我可以看到，它根本不起作用。我困惑於此。它適用於所有其他瀏覽器。

如果有人能幫忙，我會非常感謝！

我已經包括大部分下面的腳本...

CSS stylesheet.css中：

#menuFrame 
{ 
    BORDER-RIGHT: #cfcfcf 1px; 
    BORDER-TOP: #cfcfcf 1px; 
    FONT-SIZE: 8pt; 
    LEFT: 164px; 
    OVERFLOW: hidden; 
    BORDER-LEFT: #cfcfcf 1px; 
    WIDTH: 520px; 
    BORDER-BOTTOM: #cfcfcf 1px; 
    TOP: -50px; 
    HEIGHT: 50px 
} 
#dataFrame 
{ 
    BORDER-RIGHT: #cfcfcf 1px; 
    BORDER-TOP: #cfcfcf 1px; 
    LEFT: 164px; 
    OVERFLOW: scroll; 
    BORDER-LEFT: #cfcfcf 1px; 
    WIDTH: 545px; 
    BORDER-BOTTOM: #cfcfcf 1px; 
    TOP: -318px; 
    HEIGHT: 284px 
}

SCRIPT syncScroll.js

// This is a function that returns a function that is used 
// in the event listener 
function getOnScrollFunction(oElement) 
{ 
try 
{ 
    return function() 
    { 
     if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both") 
     oElement.scrollLeft = event.srcElement.scrollLeft; 
     if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both") 
      oElement.scrollTop = event.srcElement.scrollTop; 
}; 
} 
catch(ex) 
{ 
    alert ('Error getOnScrollFunction/n'+ ex.message) 
} 
} 
// This function adds scroll syncronization for the fromElement to the toElement 
// this means that the fromElement will be updated when the toElement is scrolled 
function addScrollSynchronization(fromElement, toElement, direction) 
{ 
    try 
    { 
     removeScrollSynchronization(fromElement); 
     fromElement._syncScroll = getOnScrollFunction(fromElement); 
     fromElement._scrollSyncDirection = direction; 
     fromElement._syncTo = toElement; 
     //browser safe 
     if(toElement.attachEvent) 
     { 
      toElement.attachEvent("onscroll", fromElement._syncScroll); 
     } 
     else 
     { 
      toElement.addEventListener("scroll", fromElement._syncScroll,true); 
     } 
    } 
    catch(ex) 
    { 
     alert ('Error addScrollSynchronization\n'+ ex.message) 
    } 
} 

// removes the scroll synchronization for an element 
function removeScrollSynchronization(fromElement) 
{ 
    try 
    { 
     if (fromElement._syncTo != null) 
     { 
      if(fromElement.detachEvent) 
      { 
       fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll); 
      } 
      else 
      { 
       fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll,true, false); 
      } 

      fromElement._syncTo = null; 
      fromElement._syncScroll = null; 
      fromElement._scrollSyncDirection = null; 
     } 
     catch(ex) 
     { 
      alert ('Error removeScrollSynchronization\n'+ ex.message) 
     } 
}

HTML：

<html> 
<head> 
<META http-equiv="Content-Type" content="text/html"> 
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="-1"> 
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8"> 
<link rel="stylesheet" href="Stylesheet.css" type="text/css"> 
<script type="text/javascript" src="syncscroll.js"/> 
</HEAD> 
<BODY bgcolor="#FFFFFF" onload="addScrollSynchronization(document.getElementById('menuFrame'), document.getElementById('dataFrame'), 'horizontal');"> 

<table class="PageLayout" align="center" border="0"> 
    <tr> 
     <td class="DataCell"> 
      <div id="menuFrame"> 
       <table class="tblMenuframe"> 
        <tr class="MenuFrameRow"> 
         <td>Menu 1</td> 
         <td>Menu 2</td> 
         <td>Menu 3</td> 
        </tr> 
       </table> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="DataCell"> 
      <div id="dataFrame"> 
       <table class="tblDataFrame"> 
        <tr> 
         <td>Data 1</td> 
         <td>Data 2</td> 
         <td>Data 3</td> 
        </tr> 
       </table 
      </div> 
     </td> 
    </tr> 
</table> 
</body> 
</html>

FIDDLE

來源

2012-08-10 Andrew Humphries

這裏：

return function() 
{ 
    if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both") 
     oElement.scrollLeft = event.srcElement.scrollLeft; 
    if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both") 
     oElement.scrollTop = event.srcElement.scrollTop; 
};

您正在使用event，但我不認爲Firefox的事件那樣。考慮：

return function (ev) 
{ 
    var target = ev && ev.target ? ev.target : event.srcElement; 

    if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both") 
     oElement.scrollLeft = target.scrollLeft; 
    if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both") 
     oElement.scrollTop = target.scrollTop; 
};

來源

2012-08-10 20:32:22 AnthonyWJones

嗨安東尼，謝謝你的迴應，但不是，沒有這樣的運氣。我需要添加任何東西給調用者使用的EV「？ - 我不知道我該怎麼做...... – 2012-08-13 14:03:24

另外，我已經看到這可能是與在CSS中的溢出有關，但改變這似乎並沒有做任何事情！哎呀！ – 2012-08-13 14:04:36

好的，劃痕，我的解決方案中有一個錯字！它的作品謝謝你！ – 2012-08-13 14:50:48

addEventListener在同步滾動2 div時無法在firefox中工作

回答

相關問題