Prevent map zoom on scroll (without jQuery)

index.html

<div id="map__wrapper">
  <iframe id="map__canvas"></iframe>
</div>

main.js

// Iframe wrapper ID set to #map_wrapper
// Iframe ID set to #map_canvas

var wrapper = document.querySelector('#map__wrapper')
var canvas = document.querySelector('#map__canvas')

// Prevent map zoom on scroll
// Enable the pointer events only on click

// Disable pointer events on doc ready
canvas.classList.add('is-scroll-disabled')

// Enable pointer events on #map_wrapper click
wrapper.addEventListener('click', function () {
  canvas.classList.remove('is-scroll-disabled')
})

// Disable pointer events when the mouse leaves #map_canvas
canvas.addEventListener('mouseleave', function () {
  canvas.classList.add('is-scroll-disabled')
})

style.css

.is-scroll-disabled {
  pointer-events: none;
}