Membuat Scroll 2 div Berjalan Secara Sersamaan Dengan JQuery

Pada artikel ini akan ditampilkan contoh bagaimana kita membuat scroll pada 2 div berjalan secara bersamaan, misalnya kita memiliki 2 div yang isi dari div tersebut saling berkaitan seperti gambar berikut,

Ketika kita menggeser scroll pada div yang pertama, maka scroll pada div ke 2 bergeser secara otomatis begitu juga sebaliknya.

Pertama buatlah tag HTML seperti berikut,


<div style="overflow-y:scroll;height:150px;border: 1px solid #cee1e8;width:200px;float:left; margin-right:20px;" id="divKiri">
    <ul type="number">
        <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>
        <li>List kedelapan</li>
    </ul>
</div>
<div style="overflow-y:scroll;height:150px;border: 1px solid #cee1e8;width:200px;" id="divKanan">
    <ul type="number">
        <li>Isi List Pertama</li>
        <li>Isi List Kedua</li>
        <li>Isi List Ketiga</li>
        <li>Isi List Keempat</li>
        <li>Isi List Kelima</li>
        <li>Isi List Keenam</li>
        <li>Isi List Ketujuh</li>
        <li>Isi List kedelapan</li>
    </ul>
</div>

Selanjutnya buatlah script JQuerynya

$(document).ready(function() {
       //perintah pada saat scroll div pertama di gerakan
       $("#divKiri").scroll(function () {
            $("#divKanan").scrollTop($("#divKiri").scrollTop());
        });
        
        //perintah pada saat scroll div kedua di gerakan
        $("#divKanan").scroll(function () {
            $("#divKiri").scrollTop($("#divKanan").scrollTop());
        });
}

Demikian contoh pembuatan scroll pada 2 div yang berjalan bersamaan, untuk lebih memahami bisa lihat contoh pada link Berikut

Semoga bermanfaat..