JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
    <li>pre-bar</li>
  </ul>

<div id="wrapper" style="height:190px; width:200px; overflow-y: auto; overflow-x: hidden; border:1px solid blue">
  <iframe id="iframeid" height="200px" width="200px" src="about:blank">
  </iframe>
</div>
  <ul>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
    <li>after-bar</li>
   ...

JavaScript

var iframeContent = "<ul><li>first 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>last foo</li><ul>",
	iframe = document.getElementById("iframeid"),
    iframeDocument = iframe.contentWindow.document,
    wrapper = $("#wrapper"),
    topOffset = 3;

iframeDocument.open();
iframeDocument.write(iframeContent);
iframeDocument.close();

wrapper.scrollTop(topOffset);

wrapper.on("scroll", function(e) {
    wrapper.scrollTop(topOffset);
});

$("body").on("mousewheel DOMMouseScroll", function (e) {
    if (e.target === iframe) {
        e.preventDefault();
    }
});