Активируем элемент (на примере карты) по скроллу с тротлингом
Для определния координат, на каком расстоянии от верхней границы экрана находится наш элемент будем использовать метод объекта – getBoundingClientRect()
getBoundingClientRect().top – расстояние от верхней части экрана до элемента
Также формуле будет участвовать свойство window.innerHeight – высота экрана (т.к. на разный устройствах она разная)
полезная статья по этому методу: https://learn.javascript.ru/coordinates
let prevTime = performance.now()
const mapEl = document.getElementById('map')
window.addEventListener('scroll', function() {
//console.log(mapEl.getBoundingClientRect().top)
const now = performance.now();
if (now - prevTime >= 300) {
// тротлинг - осуществляем данную проверку с задержкой (пропуском) по времени
if (mapEl.getBoundingClientRect().top - window.innerHeight < 0) {
//console.log('map wrapper is visible')
if (typeof google == "undefined" || google.map == "undefined") {
$.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyB6985A8dqacuHnvHsdPomJmPpfyWbJqAs', function() {
initMapAndSetMarker(mapEl)
})
}
prevTime = now;
}
}
})