Question

我当前正在运行一个脚本，当新消息添加到队列中时，该脚本希望水平对齐来自IRC feed的所有聊天消息并滚动浏览。

我的问题是，当队列在newLine的追加部分内有新消息时，将调整聊天框的宽度，从而弄乱了过渡效果，通常可以确保聊天可读且不会滚动到快速。虽然稍后会在宽度上重新添加和删除新行，但重绘确实会导致跳跃效果，我想避免这种情况。

造成此问题的原因不同。第一个是提要来自的Twitch聊天往往非常活跃，这导致许多新消息，第二个问题是聊天消息可能很长，因此滚动需要足够慢才能显示它们

所以基本上，如何确保append（）不会使我专注于当前消息跳转？我如何才能获得持续不断的过渡效果，所以新消息就会滚动而不仅仅是添加到末尾。

也许最好的解决方案是，只要焦点保持不变且不会在新宽度上变化，就将新消息添加到右侧不可见字段中的聊天框中。但是我不知道该怎么办。

 setInterval(function() {
        if (Chat.vars.queue.length > 0) {
            var newLines = Chat.vars.queue.join('');
            Chat.vars.queue = [];
            var old_width = $('#chat_box').width();
            $('#chat_box').append(newLines + " ");
            var offset = old_width - $('#chat_box').width();

            $('#chat_box').css('transition', 'right 0s');
            $('#chat_box').css('right', offset + 'px');

            setTimeout(function() {
              $('#chat_box').css('transition', 'right 1s');
              $('#chat_box').css('right', '3px');
            }, 20);

            $('#chat_box')[0].scrollTop = $('#chat_box')[0].scrollHeight;
            var linesToDelete = $('#chat_box .chat_line').length -  Chat.vars.max_messages;

            if (linesToDelete > 0) {
              for (var i = 0; i < linesToDelete; i++) {
                $('#chat_box').contents().eq(0).remove();
                // $('#chat_box .chat_line').eq(0).remove();
              }
            }

          }
          else if (getParameterByName('fade')) {
            var messagePosted = $('#chat_box .chat_line').eq(0).data('timestamp');
            if ((Date.now() - messagePosted) / 1000 >= Chat.vars.maxDisplayTime) {
              $('#chat_box .chat_line').eq(0).addClass('on_out').fadeOut(function() {
                $(this).remove();
              });
            }
          }
        }, 250);

#chat_box {
      background-color: transparent;
      font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
      font-size: 20px;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      position: absolute;
      overflow: hidden;
      color: #D3D3D3;
      border-radius: 4px;
    
      text-align: right;
      white-space: nowrap;
      height: 48px;
      line-height: 48px;
      right: 200;
      padding-right: 5px;
      text-shadow:
      2px 2px 1px #000,
      -1px 2px 1px #000,
      2px -1px 1px #000,
      -1px -1px 1px #000;
}

jQuery append（）导致水平流聊天不流动，而是跳转

0 个答案: