JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-container">scroll down</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">Click the map to enable scroll. When mouse leaves the map disable scroll.</div>
<div class='content-container  embed-container  maps'>
  <iframe style="pointer-events: none;" 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" width="100%" height="100" frameborder="0" style="border:0"></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: rgba(255, 0, 0, .1);
    
    text-align: center;
}

JavaScript

// Disable scroll zooming and bind back the click event
  var onMapMouseleaveHandler = function (event) {
    var that = $(this);

    that.on('click', onMapClickHandler);
    that.off('mouseleave', onMapMouseleaveHandler);
    that.find('iframe').css("pointer-events", "none");
  }

  var onMapClickHandler = function (event) {
    var that = $(this);

    // Disable the click handler until the user leaves the map area
    that.off('click', onMapClickHandler);

    // Enable scrolling zoom
    that.find('iframe').css("pointer-events", "auto");

    // Handle the mouse leave event
    that.on('mouseleave', onMapMouseleaveHandler);
  }

  // Enable map zooming with mouse scroll when the user clicks the map
  $('.maps.embed-container').on('click', onMapClickHandler);