jQuery scrollTop速度取决于方向的奇怪行为

Question

我有一个iframe，应通过onmuseover在两个图像按钮之一上上下滚动其内容。 这是HTML代码的一部分：

    <!-- News -->
    <table class="HomeITable" border="0px" cellspacing="0" cellpadding="0" width="182px" height="246px">
     <tr>
      <td class="HomeITableHead" align="left" valign="top" width="182px" height="23px"><a href="cgi-bin/d4_adm_news.cgi" target="_top"><img src="images/home_table_head_news.png" border="0" alt="" width="182px" height="23px" style="border: 0px solid #FFFFFF" /></a></td>
     </tr>
     <tr>
      <td align="left" valign="top" width="182px" height="11px" style="width: 182px; height: 11px"><img id="ScrollNewsUp" src="images/home_table_button_up_pas.png" border="0" alt="" width="182px" height="11px" style="border: 0px solid #FFFFFF" onmouseover="HomeTableScroll(this,'news','up')" onmouseout="StopHomeTableScroll(this,'news')" /></td>
     </tr>
     <tr>
      <td align="center" valign="middle" width="182px" height="198px" style="width: 182px; height: 198px">
          <iframe id="IFnews" src="frames/news.html" width="172px" height="190px" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowtransparency="true" style="width: 172px; height: 190px; visibility: visible"></iframe>
      </td> 
     </tr>
     <tr>
      <td align="left" valign="top" width="182px" height="11px" style="width: 182px; height: 11px"><img id="ScrollNewsDn" src="images/home_table_button_down_pas.png" border="0" alt="" width="182px" height="11px" style="border: 0px solid #FFFFFF" onmouseover="HomeTableScroll(this,'news','down')" onmouseout="StopHomeTableScroll(this,'news')" /></td> 
     </tr>
     <tr>
      <td align="left" valign="top" width="182px" height="3px" style="width: 182px; height: 3px"></td> 
     </tr>
    </table>

这是javascript函数：

// home tables scroll

var HTScrollTime=10000;

function HomeTableScroll(CalObj,CItable,Cdirect){

    var frameWindow=$('#IF'+CItable).get(0).contentWindow;

    var scrollToValue=0;
    if(Cdirect=='down'){scrollToValue=frameWindow.$(document).height();}

    if(CalObj.src){
        CalObj.src=CalObj.src.toString().replace("_pas.png","_act.png");
        frameWindow.$("html, body").animate({scrollTop : scrollToValue},HTScrollTime);
    }
}

function StopHomeTableScroll(CalObj,CItable){

    var frameWindow=$('#IF'+CItable).get(0).contentWindow;

    if(CalObj.src){
        CalObj.src=CalObj.src.toString().replace("_act.png","_pas.png");
        frameWindow.$("html, body").stop(true,false);
    }
}

从上面的代码可以明显看出，滚动时间设置为10000 mS（10秒）

奇怪的是，当您向下滚动（通过在下部“按钮”上的鼠标悬停）时，滚动需要五秒钟，而当您向上滚动（通过在上部的“按钮”上的鼠标悬停）时，滚动需要10秒。

我不明白为什么向下滚动的速度是设置速度的两倍。

我将不胜感激。

整个内容可以在这里看到： http : //lyaskovets.bydimo.com/index1.php它涉及前两个橙色表（ Новини和Обяви ）。

Answer 1

我发现了问题。

frameWindow。$（document）.height（） 不返回 iframe中文档的高度。 它返回整个浏览器窗口的可用高度，即取决于窗口的大小。

在我的情况下，iframe中文档的实际高度为516px，但是（以我的屏幕分辨率）浏览器窗口的可用高度为1138px，大约是原来的两倍。 并且因为它获得了两倍的速度差

如果我使用javascript： frameWindow.document.body.scrollHeight获得iframe中文档的高度，它将返回516px的正确高度，一切正常。

function HomeTableScroll(CalObj,CItable,Cdirect){

    var frameWindow=$('#IF'+CItable).get(0).contentWindow;

    var scrollToValue=0;
    //if(Cdirect=='down'){scrollToValue=frameWindow.$(document).height();}
    if(Cdirect=='down'){scrollToValue=frameWindow.document.body.scrollHeight;}

    if(CalObj.src){
        CalObj.src=CalObj.src.toString().replace("_pas.png","_act.png");
        frameWindow.$("html, body").animate({scrollTop: scrollToValue}, {duration: HTScrollTime, easing: "linear"});
    }
}