Активируем элемент (на примере карты) по скроллу с тротлингом

Для определния координат, на каком расстоянии от верхней границы экрана находится наш элемент будем использовать метод объекта – 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;
		}
	}
})

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *