-
[JavaScript] 무한 스크롤 (Vanilla JS)코딩테스트 2024. 9. 10. 15:45
<!DOCTYPE html> <html> <head> <title>Vanilla JavaScript Infinite Scroll</title> <style> .list-item { border-bottom: 1px solid #ddd; padding: 20px; } </style> </head> <body> <div id="list"> <p id="contents"> </p> </div> <script> document.addEventListener("DOMContentLoaded", function() { loadMoreContent(); window.addEventListener("scroll", function () { if (detectBottom()) { loadMoreContent(); } }); }) function detectBottom() { var scrollTop = window.scrollY || document.documentElement.scrollTop; var innerHeight = window.innerHeight; var scrollHeight = document.documentElement.scrollHeight; return scrollTop + innerHeight >= scrollHeight - 10; } function loadMoreContent() { var contents = document.getElementById("contents"); for (var i =0; i<10; i++) { var newItem = document.createElement("div"); newItem.className = "list-item"; newItem.textContent = "new item" + (contents.children.length + 1); contents.appendChild(newItem); } } </script> </body> </html>이 문제의 핵심은 어떤 조건에서 스크롤을 생성시키느냐,
화면에서 bottom이 감지가 되면 스크롤을 생성시키기로.
그 함수는 detectBottom
'코딩테스트' 카테고리의 다른 글
[Java/프로그래머스] 저주의 숫자 3 (0) 2024.03.22 [Java/프로그래머스] 같은 숫자는 싫어 (0) 2024.03.22 [Java/프로그래머스] 3진법 뒤집기 (0) 2024.03.22 [Java/프로그래머스] 커피심부름 (2) 2024.03.22 [Java/프로그래머스] 치킨 쿠폰 (0) 2024.03.22