JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sideDiv" style="position:fixed;overflow:scroll;background-color:Orange; width:500px; height:50px; left:60px"><div style="width:20000px">&nbsp;</div>&nbsp;</div>

<div id="upDiv" style="position:fixed;overflow:scroll;background-color:Green; height:500px; width:50px;"><div style="height:200000px">&nbsp;</div>&nbsp;</div>


<div style="width: 20560px; height: 200000px;"></div>

JavaScript

var sideDiv;
var upDiv;
$(document).ready(function(){
           $(window).scroll(scrollMover);
            sideDiv = document.getElementById('sideDiv');  
            upDiv = document.getElementById('upDiv');
});



function scrollMover(e)
{
    try
        {
           var offsets = getScrollXY();
           sideDiv.scrollLeft = offsets[0];
           upDiv.scrollTop = offsets[1];
        }
    catch (ex)
    {
     
    }
}

function getScrollXY()
{
    var XOffset = 0, YOffset = 0;
    if (typeof (window.pageYOffset) == 'number')
    {
        //Netscape compliant
        YOffset = window.pageYOffset;
        XOffset = window.pageXOffset;
    } else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
    {
        //DOM compliant
        YOffset = document.body.scrollTop;
        XOffset = document.body.scrollLeft;
    } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
    {
        //IE6 standards compliant mode
        YOffset = document.documentElement.scrollTop;
        XOffset = document.documentElement.scrollLeft;
    }
    return [XOffset, YOffset];
}