How to prevent scrolling to the bottom of div?

Question

I'm working on this question/answers type of chatbox and found many questions/solutions related to having auto scroll to the bottom of div. As I understand, this line of code here would do just that.

var scrollingChat = document.querySelector('#chat')
scrollingChat.scrollTop = scrollingChat.scrollHeight

However, since there can be multiple answers to the questions, they can be longer than what viewable screen can display. With the code above, it's automatically scrolling down to the bottom of the chatbox. What I want is to have scrolling to stay at the current position and it's up to user to scroll down to see additional answers displayed, especially since the first answer should be the most relevant.

Is it possible to do so? I tried to comment those lines of codes but it doesn't do anything. Any help or recommendation on how I can do that is greatly appreciated.

UPDATED - maybe I can better explain here. In my chatbox, I have these dynamic div elements:

      <div>... something... </div>
      <div class="from-user" id="questionDiv_1"</div>
      <div class="from-system" id="answerDiv_1_0"</div>
      <div class="from-system" id="answerDiv_1_1"</div>      
      <div class="from-system" id="answerDiv_1_2"</div>
   </div>

So in this case, as soon as the user type in the question, there will be multiple answers coming from the backend system. Can I have the scroll to stay at the questionDiv_1 element and not automatically scroll down to the bottom of my chat div? How do I do that?