Как я могу сохранить положение внутри прокручиваемого списка, когда добавляю новые элементы в верхнюю часть?

Question

Когда я добавляю некоторые элементы в свой прокручиваемый список с помощью функции jQuery s 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

Если вы хотите сохранить позицию прокрутки, вы можете отслеживать положение scrollTop и scrollHeight div, а затем использовать 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>