Skip to content

Instantly share code, notes, and snippets.

@TheAnonymous
Created June 3, 2016 08:32
Show Gist options
  • Save TheAnonymous/49fc5e11eb59f421eb5444d1ef96ad6e to your computer and use it in GitHub Desktop.
Save TheAnonymous/49fc5e11eb59f421eb5444d1ef96ad6e to your computer and use it in GitHub Desktop.
This is an example how to test if an element is in viewport.
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8"/>
<title>Test if element is in viewport</title>
</header>
<body>
</body>
<script>
"use strict"
var foo = document.getElementsByTagName("body")[0];
for (var i=0;i < 10000; i++){
var node = document.createElement("p");
node.appendChild(document.createTextNode("Foobar"));
foo.appendChild(node);
}
setInterval(function(){
var elements = document.getElementsByTagName("p");
var windowBottom = (window.pageYOffset + window.innerHeight);
var windowTop = window.pageYOffset;
console.log(windowBottom);
console.log(windowTop);
var start = (new Date()).getTime();
for (var i = 0; i < elements.length; i++) {
var tmp = elements[i];
if((tmp.offsetHeight + tmp.offsetTop) > windowTop && (tmp.offsetHeight + tmp.offsetTop) < windowBottom){
//console.log("Element sichtbar", tmp);
tmp.style.color = "Red";
tmp.style.fontSize = "large";
}
else
{
tmp.style.color = "Black";
tmp.style.fontSize = "medium";
}
};
var end = (new Date()).getTime();
console.log("Stopwatch", (end - start));
}, 3000);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment