Question

我有多个包含文本的div彼此堆叠，这些div通过大约800x800像素的帧可见。我正在使用element.scrollIntoView(...)（行为流畅）在div之间进行视觉滚动，但是某些div的长度大于800px，因此跳过了800px之后的div内容。我想使用JavaScript向下滚动该div（类似于{behavior:'smooth', block:'end'}），但只能在给定的时间内滚动，而不是立即滚动（例如，使其缓慢滚动到底部10秒钟，以便可以读取所有文本）。我将如何实现？

Answer 1

您想要这样的东西吗？

$(window).ready(() => {
  let numDivs = 4; // how many divs you have
  let scrollTime = 10000; // how long it would take to scroll to the specified location
  let scrollVal = ($('#first').offset().top) + (($('#second').offset().top)/numDivs);
  $("html, body").animate({ scrollTop: scrollVal }, scrollTime);
});

.block-small {
  padding: 15px;
  height: 500px;
}

.block-med {
  padding: 15px;
  height: 800px;
}

.block-large {
  padding: 15px;
  height: 1000px;
}

#first {
  background-color: green;
}

#second {
  background-color: red;
}

#third {
  background-color: orange;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<div class="block-small" id="first"></div>
<div class="block-med" id="second"></div>
<div class="block-large" id="third"></div>

另外，这是working example：）

在给定时间内滚动到div的底部

1 个答案: