單擊按鈕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>