Некоторые ответы нашего чат-бота очень длинные. Веб-чат автоматически прокручивается вниз, поэтому пользователям нужно прокрутить вверх, чтобы добраться до вершины пузыря и начать чтение.
Я реализовал пользовательское средство визуализации (реакции), чтобы обернуть ответы в пользовательский компонент, который просто оборачивает ответ в тег div. Я также реализовал простой кусок кода для прокрутки к вершине пузыря.
const MyCustomActivityContainer = ({ children }) => {
const triggerScrollTo = () => {
if (scrollRef && scrollRef.current) {
(scrollRef.current as any).scrollIntoView({
behavior: 'smooth',
block: 'start',
})
}
}
const scrollRef: React.RefObject<HTMLDivElement> = React.createRef()
return (
<div ref={ scrollRef } onClick={ triggerScrollTo }>
{ children }
</div>
)
}
export const activityMiddleware = () => next => card => {
if (/* some conditions */) {
return (
<MyCustomActivityContainer>
{ next(card) }
</MyCustomActivityContainer>
);
} else {
return (
{ next(card) }
)
}
};
Но это работает только в том случае, если ползунок полосы прокрутки не находится в самом нижнем положении (для прокрутки вниз осталось не менее 1 пикселя, см. Здесь ). Проблема заключается в перехватчике useScrollToBottom, который всегда прокручивается вниз, если полоса прокрутки полностью прокручивается вниз.
Есть ли способ переписать поведение прокрутки или временно отключить функцию scrollToBottom?