Question

我已经看过一些自定义的Scrollbard，但不能为我需要的东西工作...... 我有一个带有动态文本的div元素，有时会有很多文本，所以滚动条显示出来，我想知道是否可以overflow: hidden;并且有一个图像（箭头指向下方），点击时，div会向下滚动通常喜欢使用浏览器滚动条我见过很多这样的事情：https://grsmto.github.io/simplebar，侧面都有滚动条，没有我想要的东西。

Answer 1

你真的试图创造这个吗？提供您尝试过的代码，以便我们可以编辑它，而不是为您编写整个内容。如果你想跳到一个位置，按住按钮的同时慢慢向下滚动，或者我将提供几种不同的类型，你就没有完全清楚。

window.scrollTo(0, 100);

如果您知道想跳多远，可以使用它。或者，使用HTML，您可以执行以下操作以跳转到页面的特定部分。

<a href="#jumpLocation">Jump to element with id jumpLocation</a>

Answer 2

你只需要更好地谷歌。查看element.scrollTop方法，更多here。来自stackoverflow ..

的帖子

Answer 3

这是（仅基础知识）：

＆＃13;

function scrollDown() {
  var cuttentOffsetTop = $('#inner').offset().top
  $('#inner').offset({top: (cuttentOffsetTop - 10)})
}

＆＃13;

#container {
  width: 100%;
  height: 300px;
  background-color: gray;
  overflow-y: hidden;
  position: relative;
}

.item {
  width: 100%;
  height: 100px;
  background-color: violet;
}

.item + .item {
  margin-top: 10px;
}

#scroll-down {
  background-color: forestgreen;
  color: white;
  margin-bottom: 10px;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll-down" onclick="scrollDown()">Click here to scroll down</div>
<div id="container">
  <div id="inner">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

＆＃13;

如果您需要解释 - 请问。

单击元素时向下滚动div

3 个答案: