wordpress php load a simple div / block on scroll

one text

WordPress PHP load a simple div on scroll

in my case, I need to load the map only when people scroll to it, don't need to be there or loaded all the time only if someone scroll to it is on the end of the page

this is the code

?><iframe width="100%" height="400" id="gmap_canvas" src="https://maps.google.com/maps?q=<?php echo do_shortcode( '[SLUG]' ); ?>&t=&z=11&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://www.whatismyip-address.com"></a><br><style>.mapouter{position:relative;text-align:right;height:400px;width:100%;}</style><?

what is the best way to load this block on the scroll ?

load 300px before getting to it.

thank you