我有一个通过URL下载的网聊窗口小部件,但是我需要对窗口小部件进行样式设置,以便滚动条的底部始终显示最新消息。我找到了一种使用CSS进行此操作的方法,但还不完全可行。

如果添加display: -webkit-flex;,我将得到所需的一切,但是聊天窗口的宽度却神秘地缩短了。我尝试添加宽度属性,但是在运行它时会忽略它们。

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

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

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

如何使我的聊天窗口将滚动焦点保持在底部(不滚动即可查看新消息),又仍然能够手动再次滚动至顶部以查看旧消息?我愿意使用CSS,HTML或JavaScript解决方案。由于HTML很容易变成Pug格式,因此即使我将Pug用于UI,我也将其包含为标记。

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'));


main.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;
}

最佳答案

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

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

这是一个足够的好解决方法。聊天窗口开始时会更窄(直到输入更长的文本),但是我可以解决这个问题。但是它在扩展后的确会保持扩展,因此至少是好的。另外,我不会丢失滚动条,这是必不可少的。

最终代码:

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'));

10-05 21:00
查看更多