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中工作

回答

相关问题