JSFiddle - React, Tailwind, and code Playground

by liggth

HTML

<div class="chat-activity-list" id="comments">

												<div class="chat-element">
													<div class="media-body ">
														<p class="m-b-xs">
															Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
														</p>
														<small class="text-muted">Today 4:21 pm - 12.06.2014</small>
													</div>
												</div>
												<div class="chat-element">
													<div class="media-body ">
														<p class="m-b-xs">
															Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
														</p>
														<small class="text-muted">Today 4:21 pm - 12.06.2014</small>
													</div>
												</div>
												<div class="chat-element">
													<div class="media-body ">
														<p class="m-b-xs">
															Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
														</p>
														<small class="text-muted">Today 4:21 pm - 12.06.2014</small>
													</div>
												</div>
												
											</div>

CSS

div.chat-activity-list {
    height: 100px;
    overflow: scroll;
}

div.chat-element {
    line-height: 30px;
}

div.chat-element:nth-child(odd){
    background-color: #e7e7e7;   
}

JavaScript

$("div.chat-activity-list").scrollTop($('div.chat-element:last').offset().top);