JSFiddle - React, Tailwind, and code Playground

by Joka89

HTML

<div id="container">
	<div id="conteudo1">
		<div class="abrir">Abrir</div>
	</div>

	<div id="conteudo2" class="d-none">
		<div id="resultado"></div>
	</div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

CSS

#container{
	background-color: #FFDEAD;
	width: 300px;
	height: 100%;
	position: fixed;

}

#conteudo1{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#conteudo2{
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

.abrir{
	cursor: pointer;
}

.d-none {
  display: none;
}

JavaScript

$(function() {
  	$(".abrir").on('click', function(){//Abrir conversa
	
		$('#conteudo1').addClass('d-none');
		$('#conteudo2').removeClass('d-none');
					
		$( "#conteudo2" ).load( "pagina.html" );
	
		//Exemplo de uso com .append (Funciona corretamente)
		/*for(var i = 0; i < 1000; i++){			
			
			$( "#conteudo2" ).append( "<p>Teste</p>" );			

		}*/

		//scroll to last message
		$('#conteudo2').delay(1000).animate ({
		  scrollTop: $('#conteudo2')[0].scrollHeight
		});

	});

});