滚动到 botframework 网络聊天中的气泡顶部答案

【问题标题】：Scroll to top of a bubble in botframework webchat滚动到 botframework 网络聊天中的气泡顶部
【发布时间】：2020-04-03 12:26:14
【问题描述】：

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

我已经实现了一个自定义渲染器（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 个像素可以向下滚动，see here）。问题是 useScrollToBottom 钩子，如果滚动条完全向下滚动，它总是自动滚动到底部。

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

【问题讨论】：

如果您可以添加一个可重现的问题演示，它可能会帮助人们提供解决方案。没有它，这似乎是一个非常广泛的问题
@KyleMit，我深入阅读了这篇文章，还阅读了 GitHub 上给定的未解决问题。如果可能，请在 CodeSandBox 之类的地方重新发布您的问题。当然，我们可以为您提供更好的帮助。
感谢所有回复。我在工作和家里都很忙，但我尝试提供一个显示问题的最小工作示例，希望在下周。

标签： javascript reactjs botframework web-chat

【解决方案1】：

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

您的意思是单击MyCustomActivityContainer 的<div> 并随后调用triggerScrollTo 不会导致滚动？那会很奇怪，但谁知道呢。在这种情况下，如果没有可重复的例子，我怀疑有人会帮助你。
或者您的意思是您可以将消息滚动到视图中，但如果它已经在视图中，那么当用户仍在阅读消息时，新消息可能会导致滚动。
的确如此，但这与您所说的您的消息很长的说法相矛盾，因为这将是短消息的问题，而不是长消息的问题。

但无论如何，你应该能够解决这个问题。
如果它在距离最低位置 1 个像素的情况下工作正常，则只需滚动该 1 个像素。您需要找到可滚动元素。并做scrollable_element.scrollTop -= 1。我测试了这种方法here。它起作用了（那里的可滚动元素是<p>'s 的祖父母）
或者您是否尝试在消息到达时自动滚动？ Аnd 那才是真正的问题，但你忘了提及它，并且没有发布尝试自动滚动的代码？

在这种情况下，您可以尝试使用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
  
  目前，没有可靠的方法来检查“滚动”事件是否由于用户手势、程序化滚动或 Chrome 合成的“滚动”事件而被触发以补偿大小变化。因此，我们尽最大努力猜测它是否是由用户手势触发的，如果它朝向开始方向则禁用粘性。
  
  还有
  https://github.com/compulim/react-scroll-to-bottom/blob/f19b14d6db63dcb07ffa45b4433e72284a9d53b6/packages/component/src/ScrollToBottom/Composer.js#L91
  
  根据我们的观察，#1 在 #2 之前大约 20 毫秒被触发。这个 stickyCheckTimeout 有可能被安排在 1 和 2 之间。这意味着，如果我们只查看 #1 来决定是否应该滚动，我们将始终滚动，这与用户的意图相反。
  
  这就是为什么我认为你应该使用setTimeout()

【讨论】：

【解决方案2】：

由于没有可重现的代码供我调整并向您展示。我的建议是稍微调整你的代码。当新消息到达时，Chatbot 需要持续的数据流计算为消息创建的 div 元素的高度。如果 div 元素大于小部件高度，则滚动到顶部，否则您可以选择保持原样。

【讨论】：