Улучшенный метод отслеживания изменения высоты для скроллинга
This commit is contained in:
@@ -74,25 +74,25 @@ export function Messages() {
|
|||||||
return () => observer.disconnect();
|
return () => observer.disconnect();
|
||||||
}, [messages.length, loading]);
|
}, [messages.length, loading]);
|
||||||
|
|
||||||
// MutationObserver - отслеживаем изменения контента (загрузка картинок, видео)
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!contentRef.current) return;
|
if (!contentRef.current || !viewportRef.current) return;
|
||||||
|
|
||||||
const observer = new MutationObserver(() => {
|
const contentEl = contentRef.current;
|
||||||
// Скроллим только если нужен авто-скролл
|
//const viewportEl = viewportRef.current;
|
||||||
if (shouldAutoScrollRef.current) {
|
let lastHeight = contentEl.scrollHeight;
|
||||||
|
|
||||||
|
const ro = new ResizeObserver(() => {
|
||||||
|
const newHeight = contentEl.scrollHeight;
|
||||||
|
const grew = newHeight > lastHeight;
|
||||||
|
lastHeight = newHeight;
|
||||||
|
|
||||||
|
if (grew && shouldAutoScrollRef.current) {
|
||||||
scrollToBottom(true);
|
scrollToBottom(true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
observer.observe(contentRef.current, {
|
ro.observe(contentEl);
|
||||||
childList: true,
|
return () => ro.disconnect();
|
||||||
subtree: true,
|
|
||||||
attributes: true,
|
|
||||||
attributeFilter: ['src', 'style', 'class']
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => observer.disconnect();
|
|
||||||
}, [scrollToBottom]);
|
}, [scrollToBottom]);
|
||||||
|
|
||||||
// Первый рендер - скроллим вниз моментально
|
// Первый рендер - скроллим вниз моментально
|
||||||
|
|||||||
Reference in New Issue
Block a user