Hi Friends,
We will continue our short tutorial,
today we are going to make a infinite scrollbar html section with the help of javascript getBoundingClientRect Method.
Let's begin
First html,
<div class="wrapper">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
and second css
section {
height: 400px;
background: linear-gradient(red, green);
margin: 3rem;
}
our basic setup is ready.
now coming to the main point of javascript.
window.onscroll = (() => {
let section = document.querySelectorAll('section')
let wrapper = document.querySelector('.wrapper');
let rect = section[section.length - 1].getBoundingClientRect()
console.log(window.innerHeight)
console.log(rect.y)
if (rect.y < window.innerHeight) {
for(let i = 0; i < 5;){
wrapper.innerHTML += `<section> </section>`
i++;
}
}
})
The onscroll event occur when the scroll down, so
we setup the section, wrapper variable and rect.
For rect variable with the help of getBoundingClientRect has "y" position of the window.
so we have make a condition
if (rect.y < window.innerHeight) {
for(let i = 0; i < 5;){
wrapper.innerHTML += `<section> </section>`
i++;
}
}
this condition occurs when the rect.y less than window.innerHeight.
for full code, you can follow my Codepen
if you interested like this short tutorial please like, share, follow me so that in the future I can make more tutorials just like this.
Thanks.
Top comments (0)