Javascript / css：使用按钮垂直滚动页面

Question

我实际上有一个具有静态高度和 100% 宽度的 div。目前这个 div 有 overflow:auto 所以有一个垂直滚动条。

但对于这个项目来说，这个 div 必须没有任何滚动条。所以我有两个按钮 - 一个位于 div 的顶部，一个位于末尾用于滚动。但到目前为止，我无法找到使用此按钮使 div 滚动（几个像素或鼠标悬停时滚动）的解决方案。

（我通常使用 jQuery，但无法使用它的 scrollTop()-Method）

所以请帮助我！

Answer 1

我希望 scrollTop 正是您所寻找的（尽管我反对这种用户体验，除非有一个真正充分的理由）这个非标准）。

它对我有用（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);
  }
});