Question

I actually have a div with a staticheight and 100% width. Currently this div has overflow:auto so there is a vertical scrollbar.

But for this project it’s necessary to have this div without any scrollbars. So I have two buttons – one at the div’s top and one at the end for scrolling. But until now I was unable to find a solution to make the div scrolling (for several px OR scrolling while mouseover) using this buttons.

(I’m commonly using jQuery, but weren’t able to use it’s scrollTop()-Method)

So please help me!

Answer 1

I’d expect scrollTop to be just what you were looking for (though I would argue against this user experience barring a really good reason to be this non-standard).

It works for me (live copy):

CSS:

#theDiv {
  height: 10em;
  overflow: hidden;
  border: 1px solid #ddd;
}

HTML:

<input id="btnDown" type="button" value="Down">
<input id="btnUp"   type="button" value="Up">
<div id="theDiv"></div>

JavaScript w/jQuery:

jQuery(function($) {
  var theDiv;

  theDiv = $("#theDiv");
  fill();

  $("#btnDown").click(function() {
    theDiv.scrollTop(theDiv.scrollTop() + 10);
  });
  $("#btnUp").click(function() {
    var top = Math.max(theDiv.scrollTop() - 10, 0);
    theDiv.scrollTop(top);
  });

  function fill() {
    var n, s;

    s = "Line 0";
    for (n = 1; n < 20; ++n) {
      s += "<br>Line " + n;
    }
    theDiv.html(s);
  }
});