滚动到botframework webchat中的气泡顶部。

Question

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

我已经实现了一个自定义的渲染器（react）来将答案包裹到一个自定义的组件中，这个组件只是将答案包裹到一个div-tag中。我还实现了一段简单的代码来滚动到气泡的顶部。

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钩子上，它总是在滚动条完全向下滚动时自动滚动到底部。

有什么办法可以覆盖滚动行为或者暂时禁止滚动条的滚动到底部功能吗？

Answer 1

由于没有可复制的例子，我只能猜测。而且我也要对这个问题进行一些猜测。因为不清楚到底是什么在不起作用。

1. 你的意思是，点击 <div> 的 MyCustomActivityContainer 和随后的呼吁 triggerScrollTo 这就很奇怪了，但谁知道呢？在这种情况下，如果没有可重复的例子，我怀疑是否有人会帮助你。

2. 或者你的意思是，你可以将消息滚动到视图中，但是如果它已经在视图中，那么新的消息可能会导致滚动，而用户仍然在阅读消息。是这样的，但是这和你说的你的消息很长的说法相矛盾，因为那是短消息的问题，而不是长消息的问题。

   但无论如何，你应该可以解决这个问题。如果在最低位置偏离1个像素的情况下可以正常工作，那么只要滚动那1个像素就可以了。你需要找到可滚动的元素。然后做 scrollable_element.scrollTop -= 1. 我测试了这个方法 此处. 它的工作原理是（在这里，可滚动元素是 <p>'s)

3. 还是在消息到达的瞬间就尝试自动滚动？А而这才是真正的问题，但你忘了说，也没有贴出尝试自动滚动的代码？

   在这种情况下，你可以尝试使用 setTimeout() 并推迟滚动，比方说。200ms.这个数字是基于我从源头收集到的。

   1. BotFramework-WebChat 用途 反应-滚动到底部
   2. 在 反应-滚动到底部 有一些超时 100ms 和 34ms
   3. BotFramework-WebChat 并没有重新定义它们

   4. 有一些启发式的 反应-滚动到底部 大祸临头https:/github.comcompulimreact-scroll-to-bottomlob3eb21bc469ee5f5095a431ac584be29a0d2da950packagescomponentsrcScrollToBottomposer.js。

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

      而 https:/github.comcompulimreact-scroll-to-bottomblobf19b14d6db63dcb07ffa45b4433e72284a9d53b6packagescomponentsrcScrollToBottomposer.js#L91。

      就我们观察到的情况而言，#1比#2早了20ms左右发射。这个stickyCheckTimeout有可能被安排在1和2之间。这意味着，如果我们只看#1来决定是否应该滚动，我们将一直滚动，与用户的意图相反。

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

Answer 2

由于没有可复制的代码，我调整一下给你看。我的建议是对你的代码稍作调整。聊天机器人需要不断的数据流，当有新消息到达时计算为消息创建的div元素的高度。如果div元素大于widget高度就滚动到顶部，否则你可以选择保持原样。