Skip to content

Instantly share code, notes, and snippets.

@MarcelloDiSimone

MarcelloDiSimone/gist:5532665

Last active December 14, 2021 22:50
Show Gist options
  • Save MarcelloDiSimone/5532665 to your computer and use it in GitHub Desktop.
Save MarcelloDiSimone/5532665 to your computer and use it in GitHub Desktop.
Download ZIP
Display elements inside a specific position range
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
}
.platform {
visibility: hidden;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
<div class="platform"></div>
</div>
<script>
window.onload = function() {
var tiles = document.querySelectorAll('.platform'),
// subtracting 300px to see the visibility change in the viewport
winHeight = document.body.clientHeight - 300,
posArr = [];
for(var index in tiles){
var elm = tiles[index];
// storing each element in an array with index equal to its y position
posArr[elm.offsetTop] = elm;
}
// we use a self executing function, returning a reference to itself,
// so it is executed when defined to set the initial state
// of all elements
window.onscroll = (function getElementsInViewport() {
var sTop = document.body.scrollTop,
// extract all elements from the array with an index/y-position
// in between the visible area
elmInRange = posArr.slice(sTop, sTop + winHeight);
for(var index in elmInRange) {
var elm = elmInRange[index];
elm.style.visibility = 'visible';
}
return getElementsInViewport;
}());
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment