JSFiddle - React, Tailwind, and code Playground

by mark69_fnd

HTML

<div id="container">
    <table>
        <tr><td id="r1">row 1</td></tr>
        <tr><td id="r2">row 2</td></tr>
        <tr><td id="r3">row 3</td></tr>
        <tr><td id="r4">row 4</td></tr>
        <tr><td id="r5">row 5</td></tr>
    </table>
</div>
<button id="scroll_r1">Scroll r1</button>
<button id="scroll_r2">Scroll r2</button>
<button id="scroll_r3">Scroll r3</button>
<button id="scroll_r4">Scroll r4</button>
<button id="scroll_r5">Scroll r5</button>

CSS

#container {
    overflow-y: hidden;
    height: 3em;
    width: 100px;
}
button {
    display: block;
}
table, td {
    border: solid 1px black;
}

JavaScript

var key, rows = {
    r1: true,
    r2: true,
    r3: true,
    r4: false,
    r5: false
};

function setup(key) {
    var row, button;
    
    button = document.getElementById("scroll_" + key);
    row = document.getElementById(key);
    button.onclick = function () {
        row.scrollIntoView(rows[key]);
    }
}

for (key in rows) {
    if (rows.hasOwnProperty(key)) {
        setup(key);
    }
}