addEventListener가 스크롤을 동기화하는 동안 firefox에서 작동하지 않습니다. 2 divs

화면의 2 개 div를 동기화하려고하는데 어떤 이유로 Firefox에서 작동하지 않습니다.addEventListener가 스크롤을 동기화하는 동안 firefox에서 작동하지 않습니다. 2 divs

볼 수있는 오류가 발생하지 않고 단순히 작동하지 않습니다. 나는 이것에 곤란하다. 그것은 다른 모든 브라우저에서 작동합니다.

누구든지 도움을받을 수 있다면, 나는 가장 감사 할 것입니다!

#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 :

은 내가 Stylesheet.css

CSS ... 다음 스크립트의 대부분을 포함했다 :

<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

210 :

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를 사용하지만 파이어 폭스 그런 이벤트가 있다고 생각하지 않습니다. 고려 :

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'를 사용하려면 호출자에게 아무 것도 추가해야합니까? - 나는 그것을 어떻게 할 것인지 잘 모르겠다 ... –

또한 CSS에서 오버 플로우와 관련이 있을지도 모르는 것을 보았다. 그러나 변경 중 하나라도하는 것처럼 보이지 않는다! 아! –

OK, 스크래치, 저의 솔루션에 오타가있었습니다! 감사합니다! –

addEventListener가 스크롤을 동기화하는 동안 firefox에서 작동하지 않습니다. 2 divs

답변

관련 문제