CSS 的 Flex 属性在 WebChat 中隐藏滚动条

Question

我有一个通过 URL 下载的网络聊天小部件，但我需要设置小部件的样式，以便滚动条的底部始终显示最新消息。我找到了一种使用 CSS 的方法，但还没有实现。

如果我添加display: -webkit-flex;，我会得到我所需要的，但聊天窗口的宽度会神秘地缩短。我试过添加宽度属性，但是当我运行它时它们被忽略了。

然后，如果我使用display: -webkit-flex; 和flex-direction:column-reverse，宽度将保持它所在容器的全宽，并且焦点在我想要的底部，但滚动条消失了，因此用户无法查看过去的消息。我也尝试了一些 javascript 方法，但是当我将它们添加到我的 .pug 文件中的脚本时，它们似乎也被忽略了。

如何让我的聊天窗口将滚动焦点保持在底部（无需滚动即可查看新消息）并且仍然能够再次手动滚动到顶部以查看旧消息？我对 CSS、HTML 或 JavaScript 中的解决方案持开放态度。由于 HTML 很容易进入 Pug 格式，因此我将其作为标签包含在内，即使我在 UI 中使用 Pug。

index.pug

 chat-window
      #webchat(action='/chat', method='POST')
      script(src='https://cdn.botframework.com/botframework-webchat/latest/webchat.js')
      script.
        const styleSet = window.WebChat.createStyleSet({
          bubbleBackground: 'rgba(252, 229, 53, 1)',
          bubbleFromUserBackground: 'rgba(4, 234, 104, 1)',
          paddingRegular: 10,
          sendBoxHeight: 50,   
        });
        window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxx' }),
        styleSet
        }, document.getElementById('webchat'));

ma​​in.css

chat-window {
    border-style: solid;
    border-width: 2px 2px 1px 1px;
    border-color: #000080;
    float: left;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 70%;
    background-color: #5a8cb1;
    height: 350px;
}

#webchat {
    max-height: 270px;
    margin-bottom: 20px;
    width: 100%;
    overflow: auto;
    display: -webkit-flex;
}

Answer 1

没有响应并不奇怪，因为小部件本身就是它自己的野兽，它可能会影响任何 CSS 或 Javascript，并具有自己的样式。尽管某些 CSS 确实有效，但值得一试。使用小部件进行样式设置的选项并不多，但我确实设法找到了解决方法。它在视觉上没有我希望的那么好，但它确实将网络聊天窗口扩展到了更大的宽度。我意识到添加display: -webkit-flex; 时它被截断的原因是因为它对聊天气泡文本“灵活”。所以当我输入更长的文本时，它会变宽。因此，我通过WebChat widget from Microsoft 为网络聊天本身找到了一些最小的样式选项。我把气泡的宽度调大了，所以当输入更长的文本时，它至少会显示一个更大的网络聊天框：

这是一个足够好的解决方法。聊天窗口开始时更窄（直到输入更长的文本），但我可以处理。但它在加宽后确实保持宽阔，所以这至少是好的。另外，我不会丢失滚动条，这是必不可少的。

最终代码：

main.css

#webchat {
    max-height: 270px;
    margin-bottom: 20px;
    width: 100%;
    overflow: auto;
    display: -webkit-flex;
    justify-content: center;
}

index.pug

chat-window
  #webchat(action='/chat', method='POST')
  script(src='https://cdn.botframework.com/botframework-webchat/latest/webchat.js')
  script.
    const styleSet = window.WebChat.createStyleSet({
      bubbleBackground: 'rgba(252, 229, 53, 1)',
      bubbleFromUserBackground: 'rgba(4, 234, 104, 1)',
      paddingRegular: 10,
      sendBoxHeight: 50,  
      bubbleMinWidth: 400,
      bubbleMaxWidth: 700
    });
    window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }),
    styleSet
    }, document.getElementById('webchat'));