的jQuery ::滾動股利不工作

我想用來創建一個可滾動DIV如下：的jQuery ::滾動股利不工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <title>Test</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> 

    <style type="text/css"> 
     div.container { 
      overflow:hidden; 
      width:200px; 
      height:200px; 
     } 
     div.content { 
      position:relative; 
      top:0; 
     } 
    </style> 

    <script type="text/javascript"> 
     $(function(){ 
      $(".container a.up").bind("click", function(){ 
      var topVal = $(this).parents(".container").find(".content").css("top"); 
      $(this).parents(".container").find(".content").css("top", topVal-10); 
      }); 

      $(".container a.dn").bind("click", function(){ 
      var topVal = $(this).parents(".container").find(".content").css("top"); 
      $(this).parents(".container").find(".content").css("top", topVal+10); 
      }); 
     }); 
    </script> 

</head> 

<body> 
<div class="container"> 
    <p> 
    <a href="#" class="up">Up</a>/
    <a href="#" class="dn">Down</a> 
    </p> 
    <div class="content"> 
    <p>Hello World 1</p> 
    <p>Hello World 2</p> 
    <p>Hello World 3</p> 
    <p>Hello World 4</p> 
    <p>Hello World 5</p> 
    <p>Hello World 6</p> 
    <p>Hello World 7</p> 
    <p>Hello World 8</p> 
    <p>Hello World 9</p> 
    <p>Hello World 10</p> 
    <p>Hello World 10</p> 
    <p>Hello World 11</p> 
    <p>Hello World 12</p> 
    <p>Hello World 13</p> 
    <p>Hello World 14</p> 
    <p>Hello World 15</p> 
    <p>Hello World 16</p> 
    <p>Hello World 17</p> 
    <p>Hello World 18</p> 
    <p>Hello World 19</p> 
    <p>Hello World 20</p> 
    <p>Hello World 21</p> 
    <p>Hello World 22</p> 
    <p>Hello World 23</p> 
    <p>Hello World 24</p> 
    <p>Hello World 25</p> 
    <p>Hello World 26</p> 
    <p>Hello World 27</p> 
    </div> 
</div> 
</body> 
</html>

我不知道我在哪裏搞亂了，但它只是拒絕工作。有什麼建議麼？

編輯：我曾經嘗試都溢出：汽車和溢出：隱藏

來源

2010-05-24 Legend

topVal是一個字符串，象100px。你需要parseInt(topVal, 10)在添加數字之前先讀取它（假設它已經設置爲像素值）。

更好地使用scrollTop來更改垂直滾動位置，而不是試圖混淆CSS。還請記住您的點擊處理程序中的return false，以停止正在遵循的#鏈接。或者，更好的是，不要將按鈕標記爲鏈接，「因爲它們不是鏈接，它們不會去任何地方。使用按鈕或例如。跨度，適當的樣式。

更好的是隻使用完全正常的overflow: auto div並讓瀏覽器提供滾動條。這通常比自定義向上滾動/向下滾動按鈕更有用，個人我總是覺得使用令人不快。

來源

2010-05-24 18:03:42 bobince

同意 - 自制滾動機制是一個可怕的想法。 – Pointy 2010-05-24 18:04:37

非常感謝... – Legend 2010-05-24 18:06:35

你爲什麼要使用溢出：隱藏嘗試使用溢出：汽車

div.container { 溢出：汽車; width：200px; height：200px; }

來源

2010-05-24 17:57:57

謝謝。我試了兩次，但似乎沒有工作。 – Legend 2010-05-24 17:58:48

你必須使用overflow：auto，否則滾動不會顯示出來。

編輯：我只是把你的代碼扔進一個頁面，看着它。這改變了我的答案。從我看到的，你想要通過上/下鏈接滾動嗎？

您也應該使用$(this).preventDefault()，以便在單擊「向上」或「向下」時停止＃顯示在URL中。

這並不一定能解決你的好奇心，但有人已經開發了一個插件，如果你想使用它，可能會有用。

http://flowplayer.org/tools/scrollable/index.html

來源

2010-05-24 18:00:34

是的...我不需要滾動條，而是想通過鏈接控制...如果我可以讓動畫效果起作用，那就太棒了。 – Legend 2010-05-24 18:02:35

上週我試圖找到某些東西時，我隱約記得一個插件（鏈接在我的答案中）。顯然可以做你想做的事情，但我想不出來。但是，如果你不必重新發明輪子，我會使用插件 – 2010-05-24 18:21:58

的jQuery ::滾動股利不工作

回答

相關問題