Here is an example of how you can create a scrollbar that starts from the bottom of the page, similar to WhatsApp’s chat interface, using Bootstrap:

HTML:

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="chat-box" id="chat-box">
        <!-- Add your chat messages here -->
      </div>
    </div>
  </div>
</div>

CSS:

#chat-box {
  height: 400px;
  overflow-y: scroll;
}

JavaScript:

// Get the chat box element
var chatBox = document.getElementById("chat-box");

// Scroll to the bottom of the chat box
chatBox.scrollTop = chatBox.scrollHeight;

You’ll want to add a class (e.g. chat-box) to the element that you want to be the chat container and give it a fixed height (e.g. 400px) and the overflow property set to scroll.

You will also want to make sure that the javascript is run after the page is loaded, that can be achieved by putting it in a script tag at the end of the body or by using an event listener for the load event.

You may need to adjust the CSS and JavaScript to match your specific layout and design.

Note that this solution is a basic one and you can customize the scrollbar to match your design and requirements.