Home/ Questions/Q 804861
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T23:59:14+00:00

I am trying to create a scrollable DIV using the following: <!DOCTYPE html PUBLIC

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0