JSFiddle - React, Tailwind, and code Playground

by Matthew Ebel

HTML

<div id="a" class='column'>
    <div>Column A</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="b" class='column'>
    <div>Column B</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<p id='info'>a.scrollTop = 0
    <br/>b.scrollTop = 0</p>

CSS

body {
    zoom:0.9;
    font-family:consolas;
    text-align:center;
}
div.column {
    float:left;
    height:300px;
    width:250px;
}
div.column>div {
    height:100px;
    width:100%;
    border-bottom:1px solid black;
}
#a {
    overflow-y:hidden;
    background-color:#66A;
}
#b {
    overflow-y:scroll;
    background-color:#559;
}
.error {
    color:#A00;
}

JavaScript

/*

I need to ensure that content is perfectly aligned across both columns, 
even if the *browser-level* zoom is not 100%. Sadly, when zoom < 1, 
"scrollTop = value" doesn't always result in that value being set.

I use css to simulate this here; It exhibits the same behavior using browser-zoom.
*/

b.onscroll = function matchScroll() {
    var a = document.getElementById("a");
    var b = document.getElementById("b");
    a.scrollTop = b.scrollTop;

    var info = document.getElementById("info");
    info.innerText = "a.scrollTop = " + a.scrollTop + "\nb.scrollTop = " + b.scrollTop;
    info.className = (a.scrollTop != b.scrollTop) ? "box error" : "box";
};