AF
HomeTagSubmit NotesAsk AnythingLoginSubscribe Us
AF
1. Feel Free to ask and submit anything on Anyforum.in and get satisfactory answer
2. Registration is not compulsory, you can directly login via google or facebook
3. Our Experts are looking for yours ?.



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
profile Rishi Kumar - anyforum.in Rishi Kumar
523188221961
up-rate
5
down-rate

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

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii

hiiiiiii


Posted On : 2017-04-10 13:08:14
Satisfied : 1 Yes  0 No
profile Garima Gupta - anyforum.in Garima Gupta
596129026019
Reply This Thread
up-rate
5
down-rate



Post Answer
Please Login First to Post Answer: Login login with facebook - anyforum.in