6

I am making a chatbot. I want to scroll to the bottom of the chat box when a new input is given by the user or the Data is sent through API.

It doesn't scroll and scroll just stays in the same position but the data is being added in the chat box

I Have tried the code from other chat bot but it didn't work either

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>

3
  • where did you determine that the screen should scroll down? Jun 15, 2022 at 19:38
  • scroll the container after a new message is appended. outputArea[0].scrollTop = 9e9; If outputArea is not the container, adjust that selector to point to the container, trying each parent all the way to document.documentElement; somewhere along the chain it will scroll...
    – dandavis
    Jun 15, 2022 at 19:39
  • thanks the outputArea[0].scrollTop = 9e9; worked for me :D Jun 15, 2022 at 19:54

5 Answers 5

34

Another interesting method is by using pure CSS, using the flex-direction method, which works by creating a wrapper for the content inside the scrolling element.

I've whipped up a quick demo below (with a button and some JavaScript for adding new items). You can also check out this separate demo-page.

The trick then lies in reversing the content direction using column-reverse in the scroller. Because the items are in another container, they don't get 'flipped' but instead always line up to the bottom. This, in fact, makes the scroller scrolled to the bottom whenever stuff is added.

Breakdown, click for demo

Added bonus: keeps scroll position (mostly*)

Also, and this is something I really like about the method; whenever the user has started scrolling (up), the scroller will not lose its scroll position when stuff is being added. So, it will only 'stick' tot the bottom if it was already scrolled (by default, or by the user) to the bottom. This makes sure there's no annoying content jumping, offering a better user experience.

* Mostly, because only iOS Safari doesn't support overflow-anchor, so it will always keep scrolling the container, regardless of user scroll position. See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor#browser_compatibility

Demo

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>

8
  • 1
    Although I implemented it with scrollTop, I also like the pure CSS way, it's interesting
    – Ian
    Jun 16, 2022 at 10:33
  • 1
    I discovered this method last year, and I really like how clean and simple (and JS independent) it is Jun 16, 2022 at 10:41
  • 1
    Awesome solution! A lot of unnecessary code left my project. You made my day :D
    – aksioto
    Aug 8, 2022 at 15:22
  • 1
    This in my humble opinion should be the accepted answer.
    – matewilk
    Dec 14, 2022 at 21:11
  • 1
    An interesting approach! Thank you, @KlaasLeussink
    – Oussama
    Jan 1 at 11:04
1

I tried several methods and found success with the one described in this css-tricks article using overflow-anchor. I'd recommend checking out the article as it has a proper explanation.

#messages-container * {
  overflow-anchor: none;
}

#anchor {
  overflow-anchor: auto;
  height: 1px;
}
<div id="messages-container">
  <!-- Insert messages here -->
  <div id="anchor"></div>
</div>

0

You can use scrollTop to achieve it.

I simply wrote an example for your reference, you will find that there are two ways to implement scrollTop, one is to use the animation wrapper, the other is to use it directly, you can compare the difference between the two methods.

const sendMessage = (selector, isAnimate = true) => {
  const text = $(selector).val();
  const $container = $('.form-container');
  $container.append(`<p>${text}</p>`);
  if (isAnimate) {
    $container.animate({
      scrollTop: $container.prop('scrollHeight')
    }, 1000);
  } else {
    $container.scrollTop($container.prop('scrollHeight'));
  }
  $(selector).val('');
};

$('button:eq(0)').on('click', function() {
  sendMessage('input[type=text]');
});

$('button:eq(1)').on('click', function() {
  sendMessage('input[type=text]', false);
});
.form-container {
  width: 400px;
  height: 100px;
  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='form-container'>
  <p>This is line 1 of text</p>
  <p>This is line 2 of text</p>
</div>
<div>
  <input type='text' placeholder="Type a message.">
  <button type='button'>Use animation</button>
  <button type='button'>Don't use animation</button>
</div>

0

The div containing the messages: #chat-output

#chat-output {
    border: 1px solid #ccc;
    overflow-x: hidden;
    overflow-y: auto;
    height: 400px;
}

function scrollToBottom()

function scrollToBottom(){
    var d = $('#chat-output');
    d.scrollTop(d.prop("scrollHeight"));
}

Call scrollToBottom() every time you want the #chat-output to scroll to the bottom:

E.g. On DOM-ready

$(function () {
    scrollToBottom()
})

E.g after appending new chat messages to the #chat-output:

function appendNewChatItem() {
    // your append() code here
    scrollToBottom();
}
-1

This worked for me:

outputArea[0].scrollTop = 9e9; 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.