Javascript 무한 스크롤바 html 섹션(실습이 포함된 자습서)

안녕 친구들,
우리는 짧은 튜토리얼을 계속할 것입니다,
오늘 우리는 javascript getBoundingClientRect 메소드의 도움으로 무한 스크롤바 html 섹션을 만들 것입니다.
의 시작하자

첫 번째 HTML,

 <div class="wrapper">
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </div>

그리고 두 번째 CSS

   section {
            height: 400px;
            background: linear-gradient(red, green);
            margin: 3rem;
        }

기본 설정이 준비되었습니다.

이제 자바스크립트의 요점에 도달했습니다.

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++;
                }
            }
        })

onscroll 이벤트는 아래로 스크롤할 때 발생하므로
섹션, 래퍼 변수 및 rect를 설정합니다.

getBoundingClientRect의 도움으로 rect 변수의 경우 창의 "y"위치가 있습니다.
그래서 우리는 조건을 만들었습니다

if (rect.y < window.innerHeight) {
                for(let i = 0; i < 5;){
                    wrapper.innerHTML += `<section> </section>`
                    i++;
                }
            }

이 조건은 rect.y가 window.innerHeight보다 작을 때 발생합니다.

전체 코드를 보려면 내 Codepen를 따를 수 있습니다.

이 짧은 튜토리얼이 마음에 든다면 좋아요, 공유, 팔로우 부탁드립니다. 그러면 앞으로 이와 같은 튜토리얼을 더 많이 만들 수 있습니다.
감사.