OpenStreetMap iFrame - click to activate mousewheel zoom

osm-scroll_zoom_handler.html

### example based on Tailwind CSS
### demo: https://codepen.io/ttntm/full/eYNRQYz
----
<div class="map_canvas relative">
    <div class="map_overlay absolute top-0 left-0 flex flex-col justify-center">
        <span class="self-center text-center text-2xl text-petrolblue">Click to activate this map</span>
    </div>
    <iframe class="map no_scroll" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=16.35138720273972%2C48.19426099352119%2C16.354927718639377%2C48.19583796732457&amp;layer=mapnik&amp;marker=48.19504948648988%2C16.353157460689545"></iframe>
</div>
<style>
    .map_canvas {
        overflow:hidden;
        background:none!important;
        height:400px;
        width:100%;
    }
    .map_canvas:hover .map_overlay {
        width: 100%;
        height: 100%;
        opacity: 1;
        transition: all .35s ease-in-out;
    }
    .map_overlay {
        width: 100%;
        height: 0%;
        background-color: rgba(255,255,255,0.85);
        opacity: 0;
        transition: all .35s ease-in-out;
    }
    .no_scroll {
        pointer-events: none;
    }
</style>
<script>
    var mO = document.querySelector('.map_overlay');
    var mF = document.querySelector('.map');

    mO.onclick = function(){
        mO.classList.add('hidden');
        mF.classList.remove('no_scroll');
    }
</script>