Having issues with my Lazy Load code:

HTML

<div class="mapFrame mobileHide" >
     <iframe class="lazy" data-src="{eval var=$config.gisMapUrl}" id="mapIFrame" ></iframe>
</div>
...
<div class="mapFrame mobileHide" >
    <iframe class="lazy"  data-src=="{eval var=$config.polUrl}" ></iframe>
</div>

Javascript

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadiFrame = document.querySelectorAll("iframe.lazy");    
  var lazyloadThrottleTimeout;
  
  function lazyload () {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }    
    
    lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadiFrame.forEach(function(iframe) {           
            if(iframe.offsetTop < (window.innerHeight + scrollTop)) {
              iframe.src = iframe.dataset.src;            
              iframe.classList.remove('lazy');  
             
            }
        }  );
        
    }, 20);
  }
 
  document.addEventListener("scroll", lazyload);
  
});

It works like a charm when the page loads; and the iframes do not load at all until I scroll to them. The issue is... Once I scroll to the iFrames, and display the iFrames. I use the scroll bar to move up or down, the iFrames' content keeps reloading itself again and again... Each time I move the scroll bar, it reloads. I need to stop once loaded and just display. Basically, once the scroll bar hits an iframe, iframe loads the content, displays the content and I can continue scrolling without it reloading the content.

Reloading takes too much time, and there is also a focus within the iframes content, which causes it to go to that particular iframe whenever you hit the scroll bar, and reloads it again. I need to have just have the iframe to display the content once it is loaded, and I can continue scrolling up or down without reloading it.

I tried removing the class="lazy", and it does remove the class but the content still reloads every time I hit the scrollbar. I tried removing scrollTop, but that just seems to remove the content within an iframe.

I am a bit rusty with javascript coding and anyone's help is appreciated especially in coding what to do next. Please help!