4520 shaares
2 résultats
taggé
viewport
Comment identifier la taille du ViewPort de votre navigateur sans effort.
Le morceau de code JS de la page :
La partie HTML :
<body onscroll="OnScrollDiv()" onload="OnScrollDiv()">
<div class="lazy"></div><div class="lazy"></div><div class="lazy"></div><div class="lazy"></div><div class="lazy"></div><div class="lazy"></div>
... (la ligne du dessus est répétée n-fois
<script>...</script>
</body>
La partie JS :
function OnScrollDiv() {
var elems = document.getElementsByClassName('lazy');
var el = elems[0];
for (var i = 0, nb=elems.length ; i < nb ; i++, el = elems[i]) {
var rect = el.getBoundingClientRect();
// $isVisible contains "true" or "false" weither the element is visible or not
var isVisible = ((rect.top - window.innerHeight) < (0 - 200) && (200 < rect.bottom));
if (isVisible) {
el.classList.add('blue-block');
}
else {
el.classList.remove('blue-block');
}
}
}