html - 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;
}

索引.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'));