JavaScript에서 자동 스크롤 구현
JavaScript는 더 나은 UI 경험을 보장하고 다양한 방법을 제공합니다. 페이지가 자동으로 스크롤되도록 설정하는 문제에서 결합하여 멋진 UI를 만들 수 있는 몇 가지 기능을 확인합니다.
여기서 기본 작업은 페이지가 로드될 때마다 웹 페이지를 자동으로 스크롤하는 것입니다. 또한 스크롤하는 동안 Enter 키를 누르면 페이지가 중지됩니다.
그리고 다시 Enter 키를 누르면 페이지 스크롤이 시작됩니다. 코드 펜스로 이동하여 코드 흐름을 이해해 보겠습니다.
JavaScript에서 setInterval()과 함께 scrollBy()를 사용하여 자동 스크롤
데모에서는 뷰포트보다 더 큰 UI를 사용합니다. 주요 작업은 JavaScript로 구현됩니다.
2개의 함수(startScroll 및 stopScroll)를 초기화했습니다. startScroll() 함수는 Enter를 누를 때마다 스크롤을 활성화합니다.
그리고 Enter 누름이 감지되면 stopScroll()이 활성화됩니다.
startScroll 함수에는 setInterval() 및 scrollBy() 메서드가 있습니다. 우리는 두 가지 방법을 병합할 것입니다.
scrollBy() 메소드를 사용하여 예상되는 스크롤 종류를 설정합니다. 코드는 수평 스크롤을 0으로 설정하고 수직 스크롤을 2 단위로 설정합니다.
아래로 스크롤하는 정적 방법이며 스크롤이 일어나는 것을 볼 수 없습니다. 페이지가 이동하고 스크롤된 부분 이후에 표시됩니다.
따라서 시간 간격을 10밀리초로 설정합니다. 따라서 페이지가 시각적으로 내려갑니다. stopScroll() 함수에서 현재 페이지 위치의 인스턴스를 확인하여 간격을 지웁니다.
또한 Enter 키를 눌러 재생이 일시 중지되도록 조건문을 만들 것입니다. 코드를 확인해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="one" style="height: 250px; background:pink">
<br>
  On page load the scrolling of the page will be enabled. <br>
  When pressed enter, the scroll will be halt. <br>
  And when pressed again it will scroll. <br>
  When the scroll meets the end of page, the scrolling function will stop. <br>
  And you can manually scroll up. An when needed press enter again to scroll to down. <br>
</div>
<div id="one" style="height: 250px; background:purple"></div>
<div id="one" style="height: 250px; background:cyan"></div>
<div id="one" style="height: 250px; background:lightgreen"></div>
</body>
</html>
let scrollerID;
let paused = true;
let interval = 10;
function startScroll() {
let id = setInterval(function() {
window.scrollBy(0, 2);
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// end of page?
stopScroll();
}
}, interval);
return id;
}
function stopScroll() {
clearInterval(scrollerID);
}
document.body.addEventListener('keypress', function(event) {
if (event.which == 13 || event.keyCode == 13) {
// 'Enter' key
if (paused == true) {
scrollerID = startScroll();
paused = false;
} else {
stopScroll();
paused = true;
}
}
}, true);
출력:
-with-setInterval()-to-Auto-Scroll.webp)
보시다시피 페이지 끝에 도달하면 페이지 스크롤이 중지됩니다. 그리고 수동으로 다시 맨 위로 스크롤하면 스크롤러를 다시 재생할 수 있습니다.
따라서 자동 스크롤 동작을 구현할 수 있습니다.
