html-javascript: How to find DOM element became visible while scrolling?

Please share some javascript code to determine whether HTML element is visible or not while scrolling.

html x 24
javascript x 33
Posted On : 2017-04-10 12:53:37.0

Answers

I have written very simple and straight forward code to check whether an element is visible in current view port or not and on scrolling?

OnVisible.html:
----------------------------------------------
<html>
<head><title>Javascript OnVisible Example- anyforum.in</title></head>
<body>
<script type="text/javascript">
function posY(elm) {
var test = elm, top = 0;

while(!!test && test.tagName.toLowerCase() !== "body") {
top += test.offsetTop;
test = test.offsetParent;
}

return top;
}

function viewPortHeight() {
var de = document.documentElement;

if(!!window.innerWidth)
{ return window.innerHeight; }
else if( de && !isNaN(de.clientHeight) )
{ return de.clientHeight; }

return 0;
}

function scrollY() {
if( window.pageYOffset ) { return window.pageYOffset; }
return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}

function checkvisible( elm ) {
var vpH = viewPortHeight(), // Viewport Height
st = scrollY(), // Scroll Top
y = posY(elm);

return (y > (vpH + st));
}

window.setInterval(function(){

if( !checkvisible(document.getElementById("click"))){
alert("yessssss");
}
},100);
</script>

<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<h1>hiiiiiii</h1>
<input type="button" value="Am I Visible?" name="Click" id="click"/>
</body>
</html>

Output:
-------------------------------

hiiiiiii

Posted On : 2017-04-10 13:08:14
Satisfied : 1 Yes 0 No

Garima Gupta
596129560202
Reply This Thread

Post Answer

Please Login First to Post Answer: Login

anyforum.in

Answer: