滚动到 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) }
        )
    }
};

但这仅在滚动条滑块不在其最低位置时才有效（至少还有 1 个像素可以向下滚动，请参阅此处）。问题是 useScrollToBottom 钩子，如果滚动条完全向下滚动，它总是自动滚动到底部。

有没有办法覆盖滚动行为或暂时禁用 scrollToBottom 功能？

Answer 1

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

\n\n

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

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

   \n\n

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

\n

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

   \n\n

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

   \n\n
   \n
   1. BotFramework-WebChat使用react-scroll-to-bottom
   \n
   2. 在反应滚动到底部有一些超时100ms和34ms
   \n
   3. BotFramework-WebChat不会重新定义它们
   \n

   4. 在react-scroll-to-bottom中有一些启发式方法可能会带来麻烦\n https://github.com/compulim/react-scroll-to-bottom/blob/3eb21bc469ee5f5095a431ac584be29a0d2da950/packages/component/src/ScrollToBottom/Composer .js

      \n\n

      \n

      目前，没有可靠的方法来检查“滚动”事件是否由于用户手势、编程滚动或 Chrome 合成的“滚动”事件来触发以补偿尺寸变化。因此，我们尽最大努力猜测它是否是由用户手势触发的，如果它朝向开始方向，则禁用粘性。

      \n

      \n\n

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

      \n\n

      \n

      根据我们的观察，#1 在#2 之前大约 20 毫秒被触发。这个 StickyCheckTimeout 有可能被安排在 1 和 2 之间。这意味着，如果我们只看 #1 来决定是否应该滚动，我们将始终滚动，这与用户的意图相反。

      \n

      \n\n

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

   \n
\n

\n