(기능추가 3-2) 무한스크롤 적용하기

1. 무한스크롤 구현하기

    <script>

        window.onscroll = function() {

            if((window.innerHeight + Math.ceil(window.scrollY))>= document.body.offsetHeight) {

                let Newphoto = document.createElement('div');

                Newphoto.classList.add('photo');

                document.getElementById('photoLayout').appendChild(Newphoto);

            }

        }

    </script>

다음과 같이 스크롤의 위치에따라 클래스가 photo인 div태그를 추가하도록 설정함.

 

문제점>

body태그의 height를 100%로 설정했는데, 스크롤을 내려도 587px로 고정되는 문제가 발생. 

이로 인해 document.body.offsetHeight의 값이 587이 되면서 페이지 끝에 도착하기 전에 div박스가 생성되는 문제가 발생됨.

 

해결방법> 

2023.08.22 아직까지 원인이 무엇인지 발견하지 못햇음. mid-height 속성을 이용하거나 html에서 속성을 100%로 줬음에도 불구하고 해결되지 않음. ㅠㅠ