javascript - 滚动到 botframework 网络聊天中气泡的顶部

Question

我们的聊天机器人的一些答案非常长。网络聊天会自动滚动到底部，因此用户必须向上滚动才能到达气泡顶部并开始阅读。

我已经实现了一个自定义渲染器(react)来将答案包装到一个自定义组件中，该组件只是将答案包装到一个 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) }
        )
    }
};

但这仅在滚动条 slider 未处于最低位置时才有效(至少还有 1 个像素可供向下滚动， see here )。问题是 useScrollToBottom 钩子(Hook)，如果滚动条完全向下滚动，它总是自动滚动到底部。

有什么方法可以覆盖滚动行为或暂时禁用scrollToBottom功能吗？

Answer 1

由于没有可重现的示例，我只能猜测。
我也必须对这个问题做出一些猜测。
因为尚不清楚不工作到底是什么:

1. 您的意思是点击 <div>的MyCustomActivityContainer随后调用 triggerScrollTo不会导致滚动？ 这会很奇怪，但谁知道呢。在这种情况下，我怀疑如果没有可重现的示例，任何人都会帮助您。

2. 或者您的意思是您可以将消息滚动到 View 中，但如果它已经在 View 中，那么当用户仍在阅读消息时，新消息可能会导致滚动。
   确实如此，但这与您所说的消息很长的说法相矛盾，因为这是短消息的问题，而不是长消息的问题。

   但无论如何，你应该能够解决这个问题。
   如果在距离最低位置 1 像素时工作正常，则只需滚动该 1 像素即可。您需要找到可滚动元素。并做scrollable_element.scrollTop -= 1 。我测试了这种方法here 。它起作用了(可滚动元素是 <p> 的祖 parent )

3. 或者您是否尝试在消息到达时自动滚动？这才是真正的问题，但您忘记提及它，并且没有发布尝试自动滚动的代码？

   在这种情况下，您可以尝试使用 setTimeout()并推迟滚动，比方说，200ms 。 这个数字基于我从来源收集的信息:

   1. BotFramework-WebChat 使用 react-scroll-to-bottom
   2. 在 react-scroll-to-bottom 中，有一些超时 100ms 和 34ms
   3. BotFramework-WebChat 不会重新定义它们

   4. react-scroll-to-bottom中有一些启发式方法可能会解决这个问题 https://github.com/compulim/react-scroll-to-bottom/blob/3eb21bc469ee5f5095a431ac584be29a0d2da950/packages/component/src/ScrollToBottom/Composer.js

      Currently, there are no reliable way to check if the "scroll" event is trigger due to user gesture, programmatic scrolling, or Chrome-synthesized "scroll" event to compensate size change. Thus, we use our best-effort to guess if it is triggered by user gesture, and disable sticky if it is heading towards the start direction.

      还有
      https://github.com/compulim/react-scroll-to-bottom/blob/f19b14d6db63dcb07ffa45b4433e72284a9d53b6/packages/component/src/ScrollToBottom/Composer.js#L91

      For what we observed, #1 is fired about 20ms before #2. There is a chance that this stickyCheckTimeout is being scheduled between 1 and 2. That means, if we just look at #1 to decide if we should scroll, we will always scroll, in oppose to the user's intention.

      这就是为什么我认为你应该使用setTimeout()