Невозможно прокручивать два элемента одновременно
в реакции js у меня есть функция, которая прокручивает элементы при наличии useRef:
ref.current?.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center",
});
Когда эта функция вызывается одновременно для нескольких элементов, фактически прокручивается только тот, который вызывается первым.
Так неужели невозможно прокручивать несколько элементов одновременно?
Если это возможно, что я делаю не так?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ты прав. когда вы используете ScrollIntoView для нескольких элементов, может отображаться только последняя прокрутка, поскольку браузер обрабатывает одну прокрутку за раз. Чтобы это исправить, просто добавьте небольшую задержку между каждой прокруткой.
Когда вы пытаетесь запустить несколько прокруток одновременно с помощью ScrollIntoView, обычно завершается только первая прокрутка, поскольку последующие команды прокрутки могут быть проигнорированы.
Попробуйте использовать window.scrollTo или element.scrollTo для ручного управления. Вместо того, чтобы полагаться на ScrollIntoView, вы можете вручную управлять прокруткой каждого элемента с помощью ScrollTo или ScrollBy с плавным поведением.
const scrollElements = () => {
if (ref1.current && ref2.current) {
ref1.current.scrollTo({ top: 0, behavior: 'smooth' });
ref2.current.scrollTo({ top: 0, behavior: 'smooth' });
}
};
Если вы используете ScrollIntoView, будет прокручиваться только первый из них, поскольку ScrollIntoView запускает операцию прокрутки. Браузер может обрабатывать только одну прокрутку одновременно.
Вот решение вашей проблемы с помощью window.scrollTo:
const scrollToElements = (refs) => {
refs.forEach((ref) => {
const rect = ref.current.getBoundingClientRect();
window.scrollTo({
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
behavior: "smooth",
});
});
};Надеюсь, это поможет!