How to correctly auto scroll to end of scrollbar?

Question

I am creating a custom chat window and trying to build it completely from scratch. I am very new to front end dev. I come from a backend dev background. So I am learning and applying concepts in parallel.

So far I am able to create the type to chatwindow and the window is auto scrolling to bottom on every addition of new chat message.

However, the auto scrolling works till approximately the first 8-10 messages and then, scroll to bottom breaks and does not work as shown in the attached image:

Following is the snippet:

function scrollToBottom() {
  $(".scrollContent").animate({
    scrollTop: $(document).height()
  }, "fast");
}

/**
  General CSS - Start
*/

body {
  background-color: #f4f4f4;
}

#PageTitle {
  /** background-color: #0295e5; **/
  background-color: #ff6600;
  padding: 10px;
  width: 460px;
  margin-top: 200px;
  margin-left: 200px;
  color: white;
  border-radius: 10px;
  border-color: #0295e5;
  box-shadow: 1px 2px 5px 1px #888888;
}

* {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
}

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.list-group {
  max-height: 480px;
  margin-bottom: 10px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.chatboxcontenttile {
  overflow-x: hidden;
}

.chatboxcontenttile::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

.chatboxcontenttile::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
}

.chatboxcontenttile::-webkit-scrollbar-thumb {
  background-color: #000000;
}


/** CSS for SVG image - Start */

.svg {
  margin-top: 5px;
  margin-left: -18px;
}

svg path,
svg circle {
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
}

svg:hover path {
  fill: #0295e5;
}


/** CSS for SVG image - End */


/**
  General CSS - End
*/


/**
  Chat Bubble - Start
*/

#bubble_Container {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border-style: solid;
  border-width: 5px;
  border-color: #0295e5;
  box-shadow: 5px 9px 18px 6px #888888;
  color: white;
  /* Positioning code */
  position: absolute;
  bottom: 20px;
  right: 50px;
}

#bubble_Container img {
  width: 45px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#bubble_Container:hover {
  cursor: pointer;
  bottom: 25px;
  right: 50px;
  box-shadow: 5px 9px 18px 10px #888888;
  transition: 200ms;
  -webkit-transition: 200ms;
  fill: red;
}

#bubble_Container:active {
  cursor: pointer;
  bottom: 20px;
  right: 50px;
  box-shadow: 5px 9px 18px 6px #888888;
}


/**
  Chat Bubble - End
*/


/**
  Chat Box Container - Start
*/

#chatbox_container_id {
  position: absolute;
  bottom: 0px;
  right: 50px;
  width: 420px;
  height: 600px;
  background-color: white;
  visibility: hidden;
  /* Formattings */
  border-style: solid;
  border-width: 0px;
  border-color: #e5e3e3;
  box-shadow: 5px 10px 30px 3px #888888;
}


/**
  Chat Box Container - End
*/


/**
  Chat Box Container Title - Start
*/

#ChatboxTitleBlock {
  height: 70px;
}

#ChatboxTitleBlockName {}

#ChatboxTitleBlockName h4 {
  position: absolute;
  left: 45px;
  right: 0;
  top: 20px;
  bottom: 0;
  margin: auto;
  width: 140px;
  color: #2F80ED;
}

#ChatboxTitleBlockClose {}

#ChatboxTitleBlockCloseButton {
  position: absolute;
  right: 5px;
}


/**
  Chat Box Container Title - End
*/


/**
  Chat Box Container Content Area - Start
*/

#ChatboxContentBlock {
  height: 480px;
}

.chatboxcontenttile {
  padding: 0px;
  width: 100%;
  clear: both;
}


/** Messaging CSS - Start */


/** sending css **/

.sendMessageRow {
  margin-top: 15px;
  margin-bottom: 15px;
}

.sendMessageRow .sendingLastCol {
  padding: 0px;
}

.sendMessageRow .sendingContentBlock {
  padding: 0px;
  margin-left: -10px;
}

.sendingContent p {
  display: inline-block;
  float: right;
  background-color: #2D9CDB;
  border-radius: 10px;
  padding: 16px 14px 16px 14px;
  color: #FFFFFF;
  /* fonts */
  font-style: normal;
  font-weight: normal;
  font-size: 12.5px;
  line-height: normal;
}

.sendMessageRow .sendingThumbnail {
  padding: 0px;
  margin-top: 0px;
  margin-left: 8px;
}

.sendMessageRow .sendingThumbnail img {
  width: 50px;
}


/** reply css **/

.replyMessageRow {
  margin-top: 15px;
  margin-bottom: 15px;
}

.replyMessageRow .replyThumbnail {
  padding: 0px;
  margin-left: 28px;
}

.replyMessageRow .replyThumbnail img {
  width: 40px;
}

.replyMessageRow .replyContentBlock {
  padding: 0px;
  margin-left: -28px;
}

.replyContent p {
  display: inline-block;
  background: rgba(227, 235, 244, 0.8);
  color: #6b6a6a;
  border-radius: 10px;
  padding: 15px 14px 15px 14px;
  /* fonts */
  font-style: normal;
  font-weight: normal;
  font-size: 12.5px;
  line-height: normal;
}

.replyMessageRow .replyLastCol {
  padding: 0px;
}


/** Messaging CSS - End */


/**
  Chat Box Container Content Area - End
*/


/**
  Horizontal Divider - Start
*/

#contentInputDivider {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  border: 1;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}


/**
  Horizontal Divider - End
*/


/**
  Chat Box Container Input - Start
*/

#ChatboxInputBlock {
  margin-top: 2px;
  height: 32px;
}

#ChatboxInputBox {
  margin-top: 1px;
}

#chatBoxInput {
  border: none;
  margin-left: -7px;
  outline: none;
}

#ChatboxVoiceBox {}

#ChatboxSendBox {}


/**
  Chat Box Container Input - End
*/


/**
    SCROLL BAR - Start
*/

.scrollContent {
  width: 420px;
  height: 480px;
  overflow: hidden;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 5px;
  border-radius: 10px;
}

;
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px 0px 0px 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 102, 0, 1);
  border-radius: 10px 0px 0px 10px;
}


/**
    SCROLL BAR - End
*/





	
	
  			A Bot
  			
  				
  			
	
	

	
	
				
					
					

					
						
							
						
						
							
								How are you?
							
						
						
							
						
					

					

					
						
							
						
						
							
								new content ok. Yeah, I agree.
							 
						
						
							
						
					

					
							
								
							
							
								
									How are you? Yeah, just answering my own question. How is the world now a days? is it yet a better place? I hope so. Yeah, this is just a dummy paragraph.
									
								
							
							
								
							
					

					
						
							
						
						
							
								new content ok. Yeah, I agree.
							 
						
						
							
						
					

					
							
								
							
							
								
									How are you?

How to properly autoscroll so that the auto scroll to bottom does not break no matter how many messages I type in the chat window?

sleukeleire · Accepted Answer

Easy fix:

/**
 *  Auto scroll to bottom
 */
function scrollToBottom() {
    $(".scrollContent").animate({ scrollTop: Number.MAX_SAFE_INTEGER }, "fast");
}

More correct fix, the height of the document is not necessarily the height of the content within the scrollContent, if there is only one child within the ".scrollContent" element, this will work:

/**
 *  Auto scroll to bottom
 */
function scrollToBottom() {
    $(".scrollContent").animate({ scrollTop: $(".scrollContent > *").height() }, "fast");
}

How to correctly auto scroll to end of scrollbar?

Answers (1)

Related Questions