使用javascript滾動HTML頁面？

我創建了一個可以通過JavaScript滾動的頁面，但是在某些瀏覽器中，當您和頁面發送文字時，它不會非常順暢地滾動。在鉻合金中，它似乎沒有任何作用。使用javascript滾動HTML頁面？

我的問題是：
什麼是使用跨瀏覽器工作的JavaScript創建平滑滾動html頁面的最佳方法。

要了解我正在嘗試做什麼，下面是我製作的測試頁。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1"> 
<title>test</title> 
    <style type="text/css"> 
     html 
     { 
      overflow:hidden; 
     } 
     #fixedtop 
     { 
      padding:1%; 
      position:fixed; 
      float:left; 
      vertical-align:middle; 
     } 
     table.scollTable td 
    { 
     background-color:Gray; 
     height:12px; 
     width:12px; 
    } 
    table.scollTable td:hover 
    { 
     background-color:Lime; 
     height:20px; 
     width:20px; 
    } 
     .container 
     { 
      background:url(http://sstatic.net/so/img/logo.png) repeat; 
      height:5000px; 
      width:5000px; 
     } 
    </style> 
</head> 
<body> 
    <form name="form1" method="post" action="TestPage.aspx" id="form1"> 
<div> 
</script> 

    <div id="fixedtop"> 
     <table class="scollTable" border="0" cellpadding="0" cellspacing="0"> 
      <tr> 
       <td onmouseover="scroll(-20,-20,this)"></td> 
       <td onmouseover="scroll(-10,-20,this)"></td> 
       <td onmouseover="scroll(0,-20,this)"></td> 
       <td onmouseover="scroll(10,-20,this)"></td> 
       <td onmouseover="scroll(20,-20,this)"></td> 
      </tr> 
      <tr> 
       <td onmouseover="scroll(-20,-10,this)"></td> 
       <td onmouseover="scroll(-10,-10,this)"></td> 
       <td onmouseover="scroll(0,-10,this)"></td> 
       <td onmouseover="scroll(10,-10,this)"></td> 
       <td onmouseover="scroll(20,-10,this)"></td> 
      </tr> 
      <tr> 
       <td onmouseover="scroll(-20,0,this)"></td> 
       <td onmouseover="scroll(-10,0,this)"></td> 
       <td></td> 
       <td onmouseover="scroll(10,0,this)"></td> 
       <td onmouseover="scroll(20,0,this)"></td> 
      </tr> 
      <tr> 
       <td onmouseover="scroll(-10,10,this)"></td> 
       <td onmouseover="scroll(-10,10,this)"></td> 
       <td onmouseover="scroll(0,10,this)"></td> 
       <td onmouseover="scroll(10,10,this)"></td> 
       <td onmouseover="scroll(10,10,this)"></td> 
      </tr> 
      <tr> 
       <td onmouseover="scroll(-20,20,this)"></td> 
       <td onmouseover="scroll(-10,20,this)"></td> 
       <td onmouseover="scroll(0,20,this)"></td> 
       <td onmouseover="scroll(10,20,this)"></td> 
       <td onmouseover="scroll(20,20,this)"></td> 
      </tr> 
     </table> 
    </div> 

    <div class="container"></div> 
</form> 
</body> 
</html> 
<script id="sTest" type="text/javascript" onload="test()"> 


    function scroll(x,y, elem) { 
     var iScroll = setInterval(
     function() { 
      SetScroll((x + GetXScroll()), (y + GetYScroll())) 
     }, 1); 
     elem.onmouseout = function() { clearInterval(iScroll) }; 
    } 

    function GetYScroll() { 
     return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; 
    } 

    function GetXScroll() { 
     return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft; 
    } 

    function SetScroll(x,y) { 
     if (document.body.scrollTop) { 
      document.body.scrollLeft = x; 
      document.body.scrollTop = y; 
     } 
     if(document.documentElement){ 
      document.documentElement.scrollLeft = x; 
      document.documentElement.scrollTop = y; 
     } 
     if (window.pageYOffset) { 
      try { 
       window.pageXOffset = x; 
       window.pageYOffset = y; 
      } catch (e) { } 
     } 
    } 
</script>

來源

2009-10-22 Your Friend Ken

-1

考慮使用jQuery。查看this question瞭解更多信息。

來源

2009-10-22 20:44:14

我的第一個想法之一是使用$（）。animate（）;但它很緊張，並沒有在鉻合金工作。我將代碼發佈爲儘可能通用，因爲我期待有些例子，並且不希望將這篇文章的範圍縮小到jQuery。似乎每個人對js問題的回答是「只要使用jQuery」，然後再閱讀問題。我不是說不使用jQuery只是儘量不要這麼一般。 – 2009-10-23 14:22:51

嘗試使用window.scrollBy來滾動。

而我第二個Evan的想法是使用一個圖書館 - 沒有一個你會失去很多時間。 jQuery只是一種選擇，最好的選擇取決於你在做什麼。

還有一件事：我注意到你試圖使用XHTML。請注意，Internet Explorer是而不是，它可以正確顯示XHTML（包括HTTP標頭等）。我建議嚴格遵守HTML 4.01，直到其他標準得到廣泛支持。無論如何，您將無法使用XHTML的跨瀏覽器優勢。

來源

2009-10-22 22:28:26 Augustus

但是，有多少個Web服務器自動檢測XHTML，並因此聲明不同的MIME類型，如果這就是您所談論的內容？此外，XHTML的優勢不僅僅在於瀏覽器 - 它們也在一些代碼編輯器中。 – Stewart 2009-10-25 15:52:48

我不知道有多少服務器嘗試檢測XHTML。他們還需要檢測瀏覽器，因爲他們的行爲有所不同，否則在最壞的情況下，最終可能會顯示「您要下載此文件」消息而不是頁面顯示。因此我建議現在堅持使用HTML瀏覽器。毫無疑問，XHTML有其優點，例如在開發過程中，如您所說，因此使用它沒有任何問題。但是您仍然應該向瀏覽器發送HTML版本，因爲它更有可能工作。我希望這個變化能夠讓XHTML無需擔心地發送給客戶端。 – Augustus 2009-11-01 13:38:00

看看這個演示的引擎蓋。它可能會給你一些想法： xAnimation.scroll

來源

2009-12-29 15:44:34

我會推薦檢查這個插件：http://demos.flesler.com/jquery/scrollTo/這是爲jQuery寫的。該頁面會讓你知道它的能力，但請查閱文檔http://flesler.blogspot.com/2007/10/jqueryscrollto.html。

我推薦jQuery的原因是，沒有更好的庫來使得複雜的Javascript任務變得簡單和易於管理。對於這個任務，你只需要做這樣的事情：

$('#element').mouseover(function() { 
    $(this).scrollTo(20); 
});

來源

2010-02-13 01:21:35 jhchen

使用javascript滾動HTML頁面？

回答

相關問題