Question

我正在尝试在屏幕上同步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

Answer 1

下面：

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

同步滚动2个div时，addEventListener在firefox中不起作用

1 个答案: