當我將新元素添加到頂部時，如何將位置保持在可滾動列表中？

Question

當我使用 jQuery 的prepend()函數向我的可滾動列表添加一些元素並且我最初位於列表頂部時，列表會自動滾動到第一個添加元素的頂部並且不保留位置。 我怎樣才能防止這種情況？

這是我的代碼示例，顯示了我的問題：

 jQuery(document).ready(function($) { $("button").click(function() { [1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(function() { $("div").prepend("<span class='new'></span>"); }); }); });

 div { border: 1px solid; width: 200px; height: 350px; overflow-y: scroll; overflow-x: hidden; } span { height: 40px; width: 200px; display: block; background: gray; } span.new { background: red !important; } span:nth-child(odd) { background: lightgray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <button>Prepend elements</button>

Answer 1

如果您想保持滾動位置，您可以跟蹤 div 的 scrollTop 位置和 scrollHeight，然后使用 scrollTop – 如：

 jQuery(document).ready(function($) { $("button").click(function() { let $div = $("div"); let top = $div.scrollTop(); let scrollHeight = $div.prop("scrollHeight"); [1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(function() { $div.prepend("<span class='new'></span>") }); $div.scrollTop(top + $div.prop("scrollHeight") - scrollHeight); }); });

 div { border: 1px solid; width: 200px; height: 350px; overflow-y: scroll; overflow-x: hidden; } span { height: 40px; width: 200px; display: block; background: gray; } span.new { background: red !important; } span:nth-child(odd) { background: lightgray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <button>Prepend elements</button>