添加新消息时滚动到底部

Question

我正在制作一个聊天机器人。当用户给出新输入或通过 API 发送数据时，我想滚动到聊天框的底部。

它不滚动，滚动只是停留在同一位置，但数据正在添加到聊天框中

我已经尝试过其他聊天机器人的代码，但它也不起作用

var outputArea = $('#chat-output');
$('#user-input-form').on('submit', function (e) {
  e.preventDefault();

  var message = $('#user-input').val();

  outputArea.append(`
    <div class='bot-message'>
      <div class='message'>
        ${message}
      </div>
    </div>
  `);



  const req = https.request(options, (res) => {
    res.setEncoding('utf8');
    res.on('data', (d) => {
      const myobj = JSON.parse(d);
      if ('narrative' in myobj.conversationalResponse.responses[0]) {
        const temp = myobj.conversationalResponse.responses[0].narrative.text;
        outputArea.append(`
      <div class='user-message'>
        <div class='message'>
          ${temp}
        </div>
      </div>
    `);
      } else if ('imageUrl' in myobj.conversationalResponse.responses[0]) {
        const img = myobj.conversationalResponse.responses[0].imageUrl;
        if ('narrative' in myobj.conversationalResponse.responses[1]) {
          const text_r = myobj.conversationalResponse.responses[1].narrative.text;
          outputArea.append(`
      <div class='user-message'>
      <div class ="message">
      ${text_r}
      <a href=""></a>
      </div>
      </div>
    `);
        } else {
          outputArea.append(`
      <div class='user-message'>
        <div class='message'>
         <img src="" width="300" height="200">
        </div>
      </div>
    `);
        }
      }
    });
  });

  req.on('error', (error) => {
    console.error(error);
  });

  req.write(data);
  req.end();

  $('#user-input').val('');

.form-container {
  width: 400px;
  height: 450px;
  padding: 10px;
  background-color: white;
  overflow: scroll;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat-popup" id="myForm">
<div class="form-container">

  <div class="chat-output" id="chat-output">
    <div class="user-message">
      <div class="message">Hi! I'm Bot, what's up?</div>
    </div>
  </div>
  <div class="chat-input">
    <form action="#0" id="user-input-form" autocomplete="off">
      <input type="text" id="user-input" class="user-input" placeholder="Talk to the bot.">
    </form>
  </div>
  </br></br>
  <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</div>
</div>

Answer 1

另一个有趣的方法是使用纯 CSS，该方法通过为滚动元素内的flex-direction内容创建一个包装器来工作。

我在下面制作了一个快速演示（带有一个按钮和一些用于添加新项目的 JavaScript）。您还可以查看这个单独的演示页面。

诀窍在于column-reverse在滚动条中使用反转内容方向。由于物品位于另一个容器中，因此它们不会“翻转”，而是始终排列在底部。事实上，每当添加内容时，这都会使滚动条滚动到底部。

额外的好处：保持滚动位置（主要是*）

另外，这是我非常喜欢这个方法的一点；每当用户开始滚动（向上）时，添加内容时滚动条不会丢失其滚动位置。因此，如果它已经滚动（默认情况下或由用户）到底部，它只会“粘”到底部。这可确保不会出现烦人的内容跳跃，从而提供更好的用户体验。

* 大多数情况下，因为只有 iOS Safari 不支持overflow-anchor，所以无论用户滚动位置如何，它都会始终保持滚动容器。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor#browser_compatibility

演示

注意：JavaScript 只是出于演示目的：解决方案本身纯粹基于 CSS。

let scrollerContent = document.getElementById('scrollerContent');

document.getElementById('addItems').addEventListener('click', function() {
  let newChild = scrollerContent.lastElementChild.cloneNode(true);
  newChild.innerHTML = "Item " + (scrollerContent.children.length + 1);
  scrollerContent.appendChild(newChild);
});

.scroller {
    overflow: auto;
    height: 100px;
    display: flex;
    flex-direction: column-reverse;
    overflow-anchor: auto !important; /*  See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor */
}

.scroller .scroller-content .item {
    height: 20px;
    transform: translateZ(0); /* fixes a bug in Safari iOS where the scroller doesn't update */
}

<div class="scroller">
  <div class="scroller-content" id="scrollerContent">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
  </div>
</div>
<br/><br/>
<button id="addItems">Add more items</button>

Answer 2

这对我有用：

outputArea[0].scrollTop = 9e9;