JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="iframeid" height="200px" src="about:blank">
 </iframe>
  <ul>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <li>bar</li>
    <ul>

JavaScript

iframe = document.getElementById('iframeid');
div_el = document.createElement('div');
div_el.innerHTML = "<ul><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><ul>";
iframe.contentWindow.document.body.appendChild(div_el);


(function(w) {
    var s = { insideIframe: false } 

    $(iframe).mouseenter(function() {
        s.insideIframe = true;
        s.scrollX = w.scrollX;
        s.scrollY = w.scrollY;
    }).mouseleave(function() {
        s.insideIframe = false;
    });

    $(document).scroll(function() {
        if (s.insideIframe)
            w.scrollTo(s.scrollX, s.scrollY);
    });
})(window);