单击按钮x次后如何滚动到div的底部？

Question

我正在制作一个允许滚动的面板。 另外，我有一个按钮，我想在单击按钮 5 次后将面板内容滚动到底部（5 x 20% of scrollHeight值） 。

我正在检查日志记录值，它是正确的，但实际上，当单击第 4 个按钮时，面板内容已经滚动到底部。

第 5 次， value已更新，但面板内容不再滚动。

 $('button').on('click', function () { var $panel = $('.panel'); var scrollHeight = $panel.prop('scrollHeight'); var value = $panel.scrollTop() + scrollHeight * 0.2; console.log(scrollHeight + ' - ' + value); $panel.animate({ scrollTop: value }, 500); });

 .panel { height: 100px; border: 1px solid; overflow-x: hidden; overflow-y: auto; }.panel div { height: 500px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="panel"> <div></div> </div> <button type="button">Scroll</button>

Answer 1

我弄清楚了这个问题。 是数学。 :/ 如果你想点击 5 次，你实际上希望它分成6段。 第一个 state 是 5 个中的第一个，因此只有 4 个额外的点击达到 5/5。 我将您的滚动条更改为/6 ，它需要点击 5 次。

 $('button').on('click', function () { var $panel = $('.panel'); var scrollHeight = $panel.prop('scrollHeight'); var value = $panel.scrollTop() + (scrollHeight / 6); $panel.animate({ scrollTop: value}, 500); });

 .panel { height: 100px; border: 1px solid; overflow-x: hidden; overflow-y: auto; }.panel div { height: 600px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="panel"> <div></div> </div> <button type="button">Scroll</button>