Блог

Главная - Вопросы по программированию - Я пытаюсь прокрутить список до конца, когда он обновляется, используя Aurelia и jQuery

Я пытаюсь прокрутить список до конца, когда он обновляется, используя Aurelia и jQuery

#javascript #jquery #typescript #aurelia

Вопрос:

Я отображаю список элементов, хранящихся в массиве, внутри прокручиваемого div.

 <div id="historybox" class = "overflow-auto row h-75 border border-primary">
  <div class="col">
    <ul>
      <li repeat.for="line of history">
        <strong>${line.label}</strong> : ${line.text}
      </li>
    </ul>
  </div>
</div>

Я хочу, чтобы при добавлении нового элемента в массив истории div historybox прокручивался вниз до самого низа.

Я попытался добавить @observable тег в переменную, а затем добавить следующий метод:

 historyChanged(newValue, oldValue) {
  $('#historybox').scrollTop($('#historybox')[0]?.scrollHeight ?? 0);
}

Это действительно приводит к прокрутке списка вниз при добавлении нового элемента. Но он прокручивает его только до предпоследнего пункта в списке, а не до последнего.

Я подозреваю, что это связано с тем, что эта historyChanged функция запускается после изменения списка истории, но до фактического обновления страницы. Добавление задержки в 100 миллисекунд перед вызовом scrollTop , по-видимому, исправляет проблему, но это кажется не идеальным решением. Поэтому мне интересно, каков «правильный» способ сделать это.

Комментарии:

1. Да, это так. Но да, я, наверное, должен использовать $('#historybox').prop('scrollHeight') . Хотя это не решает мою проблему.

2. Я исправляюсь — это приятный маленький кусочек синтаксического сахара, о котором я не знал 🙂

Ответ №1:

Некоторое время назад мне пришлось выполнить динамическую «прокрутку вниз». Вы можете включить это в обратный вызов или что-то в этом роде. Я сделал это с помощью чистого JavaScript.

 // Pin scroll to bottom
document.getElementById('historybox').scrollTop = document.getElementById('historybox').scrollHeight

Как вы можете видеть, он установит для атрибута scrollTop значение атрибута scrollHeight, который находится внизу.

Я просто проезжаю мимо в небольшой спешке, надеюсь, это поможет, и если это не то, что вы хотите, дайте мне знать, и я могу попытаться помочь вам позже.

Комментарии:

1. Это действительно прокручивает поле вниз, но мне все еще нужно выяснить, как заставить его работать после добавления элемента списка на страницу, а не до этого.

2. Как я уже сказал, вы можете использовать это при обратном вызове функции, или в крючке, или в чем-то еще. Я использовал его с React, поэтому я просто поставил его на крючок useEffect. В jQuery может быть что-то, или вы можете просто написать как обратный вызов своей функции «добавить» или поместить код в конец функции. Вы знаете, что такое функция обратного вызова? Если нет, взгляните на это.

Метки: , ,