Javascript infinite scrollbar html section (Tutorial with practice)

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.

Blog

Javascript infinite scrollbar html section (Tutorial with practice)

Nikhil Chandra Roy

Join Our Newsletter. No Spam, Only the good stuff.

Related