的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 ::滚动股利不工作

回答

相关问题