Question

我正在尝试使用以下内容创建可滚动的DIV：

<!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>

我不知道我在哪里弄乱，但它只是拒绝工作。有什么建议吗？

编辑：我尝试了两种溢出：自动和溢出：隐藏

Answer 1

你必须使用overflow：auto否则滚动不会显示。

编辑：我只是将您的代码放入页面并查看它。这改变了我的回答。从我看到的，你想通过上/下链接滚动它吗？

当您点击向上或向下时，您也应该使用$(this).preventDefault()来阻止＃显示在网址中。

这并不一定能解决你的好奇心，但有人已经开发了一个插件，如果你想使用它可能会有用。

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

Answer 2

topVal是一个字符串，如100px。在向其添加数字之前，您需要parseInt(topVal, 10)才能读取它（假设它已经设置为像素值）。

最好使用scrollTop来更改垂直滚动位置，而不是试图弄乱CSS。另请记住点击处理程序中的return false以停止跟踪#链接。或者，更好的是，不要将按钮标记为链接，因为它们不是链接，它们不会去任何地方。使用按钮或例如。跨度，适当的样式。

最好还是使用完全正常的overflow: auto div并让浏览器提供滚动条。这通常比使用自定义向上滚动/向下滚动按钮更有用，我个人总觉得这种按钮使用起来非常令人不快。

Answer 3

为什么你使用溢出：隐藏尝试使用overflow：auto

div.container { 溢出：汽车; 宽度：200像素; 高度：200像素; }

jQuery :: Scrollable Div不起作用

3 个答案: