JSFiddle - React, Tailwind, and code Playground

by kwiliarty

HTML

<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>
<div>Won't move</div>

<div id='scrollable'>
    <ul>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of text</li>
        <li>Lots of...

CSS

#scrollable {
    height: 80px;
    overflow-y: scroll;
    margin-top: 2em;
    border: 1px solid black;
    position: relative;
}

JavaScript

var scrollable = document.getElementById('scrollable');
var topPos = document.getElementById('scrollme').offsetTop;
scrollable.on('click', function () {
    scrollable.scrollTop = topPos;
});