Блог

Главная - Вопросы по программированию - Как управлять поведением прокрутки, когда к ней прикреплено длинное событие

Как управлять поведением прокрутки, когда к ней прикреплено длинное событие

#javascript #css #scroll

Вопрос:

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

1 — Прокрутка замораживается до тех пор, пока событие прокрутки не закончится, а затем оно вызовет следующее событие прокрутки.

2 — Я могу прокручивать плавно, но событие прокрутки запускается после завершения предыдущего события.

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

кодовое обозначение: https://codepen.io/xmorelll/pen/wvdmbYq

 const container = document.getElementById("container");
const text = document.getElementById("text");



container.addEventListener('scroll', (event) => {
  //sleep 1Second to simulate that the program is busy.
  let a = new Date().getTime();
  while(new Date().getTime() < a   1000){};
  
  text.style.top = container.scrollTop   "px"; 
}); 
 #container {
  height: 300px;
  width: 300px;
  border: solid 1px black;
  overflow: auto;
}

#content {
  height: 1000px;
  width: 100%;
  background-image: linear-gradient(red, yellow);
  position: relative;
}

#text {
  position: absolute;
  left: 0;
} 
 <div id="container">
  <div id="content">
    <span id="text">Hola</span>
  </div>
</div>

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

1. Что ты хочешь сделать со свитком? Загружается из серверной службы?

2. Это зависит от того, что вы пытаетесь сделать в скроллере. Замораживание прокрутки, безусловно, не очень хорошая идея, но опять же, какое действие синхронизации у вас отнимает много времени?

3. Нет, ничего от сервера. функция события прокрутки синхронизируется, как я уже сказал. В моей реальной ситуации я создаю таблицу бесконечной прокрутки, которая отображает новые строки в режиме реального времени во время прокрутки и удаляет те, которые остались за пределами экрана. Но мой вопрос в том, как я могу выбирать между каждой ситуацией. Потому что до сих пор для одного и того же кода на некоторых ПК прокрутка зависает, а на других ПК прокрутка плавная.

4. @XavierMorellLlorens Возможно, было бы целесообразно включить ваш код для таблицы прокрутки inifinite в ваш кодовый набор

5. Добавление моего кода с бесконечной прокруткой будет таким же, как изменение: while(новая дата().getTime() Не понимаю, почему это будет полезно. Мой вопрос в том, как сделать так, чтобы это событие прокрутки в этом коде не замораживало прокрутку ни в какой ситуации.

Метки: ,