JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div class="content_wrapper">
        <div class="content">
               <div class="section">
                   text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>
text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>text</br>
               </div>
       </div>
</div>

CSS

.content_wrapper {
    position :relative;
    height:2000px;
}

.content {
    position:absolute;
    height:100%;
    width:100%;
   overflow:scroll;
}

.section {
  position:absolute;   
 height:auto;   
 width:100%;   
}

JavaScript

content1 = '<div class="content"><div class="section">      text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br>text1</br> </div> </div>'
$('.content').scrollTop(500);
$(content1).scrollTop(500);
$('.content').replaceWith($(content1));
$('.content_wrapper').css('height','600px');
$('.content').scrollTop(500);