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毫秒（10秒）

奇怪的是，当你向下滚动时（通过onmouseover在下面的“按钮”）滚动需要五秒钟，当你向上滚动时（通过onmouseover在上面的“按钮”）滚动需要10秒。

我无法理解为什么向下滚动比设置快两倍。

我会很感激。

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

Answer 1

我发现了问题。

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

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

如果我使用javascript： frameWindow.document.body.scrollHeight 获取iframe文档的高度，则返回正确的heightof 516px，一切正常。< / p>

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

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

1 个答案: