JSFiddle - React, Tailwind, and code Playground

by azhari

HTML

<div style="overflow-y:scroll;height:200px;border: 1px solid #cee1e8;width:100px;" id="alRole"> 
    <ul>
        <li>List Pertama</li>
        <li>List Kedua</li>
        <li>List Ketiga</li>
        <li>List Keempat</li>
        <li>List Kelima</li>
        <li>List Keenam</li>
        <li>List Ketujuh</li>
    </ul>
</div>
<div style="overflow-y:scroll;height:200px;border: 1px solid #cee1e8;width:100px;" id="alRole2">
    As long as you make the menu using UL and LI it should do the rest for you (as in creating the tree).
So basically, if you remove the text from the LI and UL nodes and make your own text, duplicate the structure, you could make something like this:
</div>

JavaScript

$("#alRole").scroll(function () {
            $("#alRole2").scrollTop($("#alRole").scrollTop());
        });