JavaScript의 무한 스크롤
무한 스크롤은 사용자가 페이지를 아래로 스크롤할 때 콘텐츠를 계속 로드하는 웹 디자인 기술입니다. 이렇게 하면 페이지 매김이 필요하지 않습니다.
Twitter와 같은 소셜 네트워킹 사이트에서 끝없는 스크롤의 성공으로 이 기술이 대중화되었지만 그렇다고 해서 이 기술을 사용해야 한다는 의미는 아닙니다.
연속 스크롤은 지속적으로 스트리밍되는 콘텐츠에 유용하며 각 콘텐츠 단위가 동일한 계층 수준에 속하고 사용자가 관심을 가질 가능성이 비슷한 상대적으로 평평한 구조를 가지고 있습니다.
오늘 포스팅에서는 JavaScript의 무한 스크롤에 대해 알아보겠습니다.
JavaScript의 무한 스크롤
GlobalEventHandlers 믹스인의 onscroll 속성은 scroll 이벤트를 처리하는 이벤트 핸들러입니다.
Scroll 이벤트는 문서 보기 또는 요소가 사용자, 웹 API 또는 사용자 에이전트에 의해 스크롤될 때 발생합니다.
통사론:
target.onscroll = functionRef
functionRef는 함수 이름 또는 함수 표현식입니다. 이 함수는 UIEvent 객체를 유일한 인수로 사용합니다.
한 번에 하나의 onscroll 핸들러만 개체에 할당할 수 있습니다.
둘 이상의 핸들러가 필요한 경우 대신 EventTarget.addEventListener() 메서드를 사용하고 scroll 이벤트를 리스너에 전달할 수 있습니다. window.onscroll 여기에 대한 자세한 정보를 찾을 수 있습니다.
예를 들어 이해해 봅시다.
<body>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
</body>
var body = document.querySelector('body');
body.onscroll = function() {
if (window.scrollY > (document.body.offsetHeight - window.outerHeight)) {
console.log('It\'s working!');
body.style.height = document.body.offsetHeight + 100 + 'px';
}
}
위의 예에서는 HTML DOM 본문 내부에 10개의 단락 태그를 정의했습니다. body가 렌더링되고 사용자가 아래로 스크롤할 때마다 문서가 현재 세로로 스크롤되는 픽셀 수를 확인합니다.
body 및 window 높이보다 큰 경우 body의 현재 높이에 100px를 추가합니다. JavaScript를 지원하는 브라우저에서 위의 코드 스니펫을 실행하십시오. 콘솔에 아래 결과를 인쇄합니다.
출력:
"It's working!"
"It's working!"
"It's working!"
"It's working!"
"It's working!"
"It's working!"
....
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn