JSFiddle - React, Tailwind, and code Playground

by TrinhThang

HTML

<div class="content-container">scroll down</div>
<div class="content-container"></div>
<div class="content-container">Click the map to enable scroll. When mouse leaves the map disable scroll.</div>
<div class='embed-container  maps'>
    <iframe width='100%' height='200' frameborder='0' src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d155419.5727920435!2d13.426141949999993!3d52.507541899999964!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a84e2b719cf2f3%3A0x8dba8fa58c57d186!2sBerlin!5e0!3m2!1sen!2sde!4v1411014193840">  </iframe>
</div>
<div class="content-container"></div>
<div class="content-container"></div>
<div class="content-container"></div>
<div class="content-container"></div>
<div class="content-container"></div>
<div class="content-container"></div>

CSS

.content-container {
    margin-top: 10px;
    
    width: 100%; height: 100px;   
    
    background: #ffffff;
    
    text-align: center;
}
.maps iframe{
    pointer-events: none;
}

JavaScript

$(document).ready(function() {
    $('.maps').click(function () {
        $('.maps iframe').css("pointer-events", "auto");
    });
    
    $( ".maps" ).mouseleave(function() {
      $('.maps iframe').css("pointer-events", "none"); 
    });
 });