JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div id="wrapper">
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet condimentum est nec imperdiet. Aliquam sed lacus urna. Sed vitae justo vitae lacus vestibulum pharetra. Phasellus nisi quam, cursus quis ultrices id, convallis in dolor. Morbi fermentum dolor magna. Donec molestie tincidunt iaculis. Quisque consectetur, nulla eget interdum suscipit, nisi leo fermentum libero, placerat scelerisque turpis risus eu arcu. Suspendisse risus leo, fringilla non euismod nec, interdum sit amet nulla. Fusce ultricies massa eu tellus consectetur iaculis. Sed eget nisi a nibh congue gravida a sit amet mi. Nullam viverra luctus sollicitudin. Cras vestibulum lobortis laoreet. Nullam aliquet fermentum urna nec lobortis. Fusce eu orci dictum augue bibendum pulvinar. Fusce in neque sit amet urna consequat consequat sed vitae quam.
</p>

<textarea id="my-text" row="10"></textarea>

<p>
Mauris lacus metus, ultricies ac aliquet ac, sodales a libero. Duis eget dui a sapien imperdiet lacinia vel non nunc. Proin placerat purus ut dolor convallis eget mollis odio vulputate. Praesent metus eros, congue id pretium sed, hendrerit quis risus. Pellentesque malesuada, dui et luctus elementum, magna massa sagittis lorem, eget lacinia massa ante sit amet ligula. Proin porttitor nisl id leo faucibus tristique. Donec venenatis elementum turpis eu semper. Donec vehicula, lacus ut accumsan auctor, lectus enim fringilla lacus, sed porta odio metus at quam. Ut nec aliquam lacus. In vehicula nibh eget justo lacinia vel facilisis orci elementum. Fusce ut mi quam, id sagittis libero. Sed eu sem sem. Etiam elementum, purus at pellentesque convallis, risus mi vehicula turpis, ac varius eros libero vel augue. Vestibulum vel lorem dui. Donec nec nunc non velit volutpat luctus in in dui.

Maecenas in nulla elit, non luctus quam. Donec porta, erat eget sagittis condimentum, sapien nisi lacinia lectus, nec dapibus erat augue eu quam. Nulla tincidunt, arcu in bibendum egestas,...

CSS

textarea {
    display: block;
    width: 98%;
    margin: 10px auto;
}
p {
    text-align: justify;
    margin: 10px;
}
#wrapper {
    height: 300px;
    overflow: auto;    
}

JavaScript

var locked_scroll = false;
var last_pos = 0;

document.getElementById('my-text').addEventListener('focus', function(event){
    console.log('set locked');
    locked_scroll = true;
    last_pos = document.getElementById('wrapper').scrollTop
});

document.getElementById('my-text').addEventListener('blur', function(event){
    console.log('set unlocked');
    locked_scroll = false;
});

document.getElementById('wrapper').addEventListener("scroll", function(event){
    
    if(locked_scroll) {
        event.target.scrollTop = last_pos;
    }
    
}, true);