jQuery::Scrollable Div does not work_问答_开发者

开发者 https://www.devze.com 2022-12-31 16:34 出处：网络

I am trying to create a scrollable DIV using the following: <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">

I am trying to create a scrollable DIV using the following:

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

I don't know where I am messing up, but it simply refuses to work. Any suggestions?

EDIT: I have tried both overflow: auto and overflow: hidden

topVal is a string, like 100px. You would need to parseInt(topVal, 10) to read it before adding a number to it (and that's assuming it was already set to a pixel value).

Better to use scrollTop to change the vertical scrolling position instead of trying to mess with the CSS. Also remember to return false from your click handlers to stop the # link being followed. Or, better, don't mark the buttons up as links, 'cos they're not links, they don't go anywhere. Use a button or eg. span, styled as appropriate.

Better still to just use a perfectly normal overflow: auto div and let the browser provide the scrollbar. This will typically be much more usable than having custom scroll-up/scroll-down buttons, which personally I always find infuriatingly unpleasant to use.

You have to use overflow:auto otherwise the scroll will not show up.

EDIT: I just threw your code into a page and looked at it. This changes my answer a bit. From what I see, do you want to have it scrollable by the Up/Down links?

You should use $(this).preventDefault() as well to stop the # from showing up in the URL when you click Up or Down.

This doesn't necessarily solve your curiosity but someone has already developed a plugin that might be useful if you wish to use it.

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

why have you used overflow:hidden try using overflow:auto

div.container { overflow:auto; width:200px; height:200px; }