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);

//document.body.addEventListener("wheel", onWheel);
$('body').bind('mousewheel DOMMouseScroll', onWheel);

function onWheel (e){
    if (e.target === iframe)
        e.preventDefault();
    console.log(e);
}