Блог

Главная - Вопросы по программированию - Прерывистая прокрутка с абсолютными расположенными элементами в React

Прерывистая прокрутка с абсолютными расположенными элементами в React

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

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

Вот изолированная среда для кода, чтобы вы могли понять, что я имею в виду. Прокрутите в любом месте правого окна, чтобы увидеть прерывистость. Если вы перейдете к нижней части кода и измените строку ReactDOM.render(<ManualScroll />, rootElement); на ReactDOM.render(<DefaultScroll />, rootElement); , прерывистость исчезнет. Если вы используете Mac, вам может потребоваться отключить настройку трекпада «перелистывать страницы» в системных настройках.

https://codesandbox.io/s/nnnz3nr27l

Как я могу достичь такого уровня плавности, сохраняя прямой контроль над прокруткой?

Вот что я пробовал:

  • Использование translate3d вместо перевода, как для graph класса, так и для node class
  • Отмена события onWheel
  • Используется window.requestAnimationFrame для обновления позиций, вместо того, чтобы делать это непосредственно в onWheel обработчике

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

1. Может быть, вы слишком долго отключаетесь или, возможно, слишком долго ждете следующего кадра?

2. На самом деле, я думаю, что вы просто манипулируете (и повторно отображаете) 5000 элементов при каждой прокрутке. Для этого вам определенно следует использовать что-то вроде canvas api

3. Я предполагаю, что также будет 5000 элементов. Изменение значения на 500 сделает его плавным. Другой способ сделать это — просто переместить 100 элементов, которые находятся слева, и 100 элементов, которые находятся справа от экрана. При этом еще 4800 остаются неподвижными до тех пор, пока они не понадобятся. Затем заменяем самый внешний элемент на неподвижный.

4. Да, моей следующей идеей было использовать некоторые хитрости, чтобы перемещать только те элементы, которые находятся на экране или близки к тому, чтобы быть на экране. Таким образом браузеры достигают желаемого уровня плавности? Т.е. когда я устанавливаю overflow: auto на родительский элемент?

5. @ChrisBrownie55 Я бы с удовольствием использовал canvas, но эти элементы на самом деле будут содержать кучу обычного html-текста, изображений и т.д. На самом деле не будет 5000 отдельных элементов, но может быть 5000 элементов, когда будут учтены все дочерние элементы дочерних элементов. Простые формы предназначены только для иллюстрации проблемы.