JSFiddle - React, Tailwind, and code Playground

by austinfrance

HTML

<div id="grid" class="grid">
    <div id="scrollbox" class="scrollbox">
        <div id="content">
            <p>1. hello</p>
            <p>2. hello</p>
            <p>3. hello</p>
            <p>4. hello</p>
            <p>5. hello</p>
            <p>6. hello</p>
            <p>7. hello</p>
            <p>8. hello</p>
            <p>9. hello</p>
            <p>10. hello</p>
            <p>11. hello</p>
            <p>12. hello</p>
            <p>13. hello</p>
            <p>14. hello</p>
            <p>15. hello</p>
            <p>16. hello</p>
            <p>17. hello</p>
            <p>18. hello</p>
            <p>19. hello</p>
            <p>20 hello</p>
        </div>
    </div>
</div>
<div id="debug"></div>
<div id="grid2" class="grid">
    <div id="scrollbox2" class="scrollbox">
        <div id="content2">
            <p>1. hello</p>
            <p>2. hello</p>
            <p>3. hello</p>
            <p>4. hello</p>
            <p>5. hello</p>
            <p>6. hello</p>
            <p>7. hello</p>
            <p>8. hello</p>
            <p>9. hello</p>
            <p>10. hello</p>
            <p>11. hello</p>
            <p>12. hello</p>
            <p>13. hello</p>
            <p>14. hello</p>
            <p>15. hello</p>
            <p>16. hello</p>
            <p>17. hello</p>
            <p>18. hello</p>
            <p>19. hello</p>
            <p>20 hello</p>
        </div>
    </div>
</div>

CSS

.grid { height: 200px; border: 1px solid black; margin: 1em; }
.scrollbox { height: 200px; overflow: scroll }
#debug { height: 1em; }

JavaScript

var count = 0,
    count2 = 0,
    scrollbox = document.getElementById("scrollbox"),
    debug = document.getElementById("debug"),
    scrollbox2 = document.getElementById("scrollbox2");
scrollbox.onscroll = function(e) {
    count ++;
    scrollbox2.scrollTop = scrollbox.scrollTop;
    debug.innerHTML = 'scroll event ' + count + ', scrollbox2.scrollTop = ' + scrollbox2.scrollTop;
}