Categories : Javascript
When user comes to the page you may want to show them animation and if element is in the bottom of page, you need to wait untill element is visible on screen to run your animation. With this ready to use function you can add this functionality all elements on screen. Also i have a youtube video that explains how i wrote this function.
Ready to use full JS code
JavaScript
function gc_detect_visibility(query,custom_funtion){
let calculator = function(query,custom_funtion){
let element = document.querySelector(query);
let element_top_offset = element.offsetTop;
let element_bottom_offset = element.offsetHeight + element_top_offset;
let screen_top_offset = window.scrollY;
let screen_bottom_offset = screen_top_offset + window.innerHeight;
if(element_top_offset > screen_top_offset && screen_bottom_offset > element_bottom_offset){
custom_funtion(element);
}
}
calculator(query,custom_funtion);
document.addEventListener('scroll',calculator.bind(null,query,custom_funtion));
}Example usage
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detect Visibility</title>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" id="element"></div>
<div class="box"></div>
<div class="box"></div>
<style>
.box {
width: 250px;
height: 250px;
background-color: blue;
margin-bottom: 20px;
}
#element {
background-color: red;
}
</style>
<script>
function gc_detect_visibility(query,custom_funtion){
let calculator = function(query,custom_funtion){
let element = document.querySelector(query);
let element_top_offset = element.offsetTop;
let element_bottom_offset = element.offsetHeight + element_top_offset;
let screen_top_offset = window.scrollY;
let screen_bottom_offset = screen_top_offset + window.innerHeight;
if(element_top_offset > screen_top_offset && screen_bottom_offset > element_bottom_offset){
custom_funtion(element);
}
}
calculator(query,custom_funtion);
document.addEventListener('scroll',calculator.bind(null,query,custom_funtion));
}
gc_detect_visibility('#element',function(element){
console.log('element is visible');
});
</script>
</body>
</html>Js detect and check element when visible on viewport
To do that as you can see in the video and the code i share with you above. We need to calculate if element is visible on screen by finding element top offset and screen top offset. If element top offset is higer than screen top offset and if element bottom offset is lower than screen bottom offset it makes element is visible on screen.
JavaScript
let element_top_offset = element.offsetTop;
let element_bottom_offset = element.offsetHeight + element_top_offset;
let screen_top_offset = window.scrollY;
let screen_bottom_offset = screen_top_offset + window.innerHeight;
if(element_top_offset > screen_top_offset && screen_bottom_offset > element_bottom_offset){
custom_funtion(element);
}In the this part of the code we gave this functionality to the function.
Also we need to add this function into the scroll event also we need to add any element query selector into it. That is why we create another function for that in the fist lines of the function.
We created “calculator” function to add this functionality to scroll event. That makes our code run every scroll behavior. Also we bind our custom function to run when element is visible on screen or viewport.
With this approach you can add any functionality to your code. Change the calculation based on your situation and solve your problem with that.