Javascript / CSS: использование кнопок для вертикальной прокрутки страницы

Question

У меня на самом деле есть div с staticheight и шириной 100%. В настоящее время этот div имеет overflow:auto так что есть вертикальная полоса прокрутки.

Но для этого проекта необходимо иметь этот div без полос прокрутки. Итак, у меня есть две кнопки - одна в верхней части div и одна в конце для прокрутки. Но до сих пор я не смог найти решение, чтобы сделать прокрутку div (для нескольких пикселей ИЛИ прокрутки при наведении курсора) с помощью этих кнопок.

(Я обычно использую jQuery, но не смог использовать его scrollTop()-метод)

Поэтому, пожалуйста, помогите мне!

Answer 1

Я бы ожидал scrollTop чтобы быть именно тем, что вы искали (хотя я бы поспорил с этим пользовательским опытом, исключая действительно веские причины быть таким нестандартным).

Это работает для меня ( живая копия):

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 с 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);
  }
});