새 자바스크립트 이벤트인 Scrollend

시간 제한 함수를 삭제하고 버그를 떨어뜨립니다. 꼭 필요한 이벤트인 스크롤end를 살펴보겠습니다.

Adam Argyle

scrollend 이벤트 이전에는 스크롤이 완료되었음을 감지할 수 있는 확실한 방법이 없었습니다. 즉, 이벤트가 늦게 실행되거나 사용자의 손가락을 계속 화면에 대고 있는 동안 이벤트가 실행되었습니다. 스크롤이 실제로 종료된 시점을 알 수 없어 버그가 발생하고 사용자 환경이 저하되었습니다.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

이 setTimeout() 전략에서 할 수 있는 최선의 방법은 100ms의 스크롤이 중지되었는지 파악하는 것입니다. 이렇게 하면 스크롤에서 이벤트가 종료된 것이 아니라 스크롤이 이벤트를 일시중지한 것과 같습니다.

scrollend 이벤트 후에는 브라우저에서 이 어려운 평가를 모두 실행합니다.

document.onscrollend = event => {…}

그거 좋은 겁니다. 출력하기 전에 정확한 타이밍과 의미 있는 조건으로 가득 차 있습니다.

실습

이벤트 세부정보

scrollend 이벤트는 다음과 같은 경우에 실행됩니다. - 브라우저에서 더 이상 스크롤을 애니메이션 처리하거나 번역하지 않습니다. - 사용자의 터치가 해제되었습니다. - 사용자 포인터가 스크롤 썸을 놓았습니다. - 사용자의 키 누름을 눌렀습니다. - 프래그먼트로 스크롤이 완료되었습니다. - 스크롤 스냅이 완료되었습니다. - scrollTo()이(가) 완료되었습니다. - 사용자가 시각적 표시 영역을 스크롤했습니다.

다음과 같은 경우 scrollend 이벤트가 실행되지 않습니다. - 사용자 동작으로 인해 스크롤 위치 변경이 발생하지 않았습니다 (변환이 발생하지 않음). - scrollTo()에 대한 번역이 없습니다.

이 이벤트가 웹 플랫폼에 도달하는 데 너무 오래 걸린 이유는 사양 세부정보가 필요한 사소한 세부정보가 많았기 때문입니다. 가장 복잡한 영역 중 하나는 문서의 시각적 표시 영역과 scrollend의 세부정보를 비교하는 것이었습니다. 웹페이지를 확대한다고 가정해 보겠습니다. 확대/축소된 상태에서 스크롤할 수 있으며 문서를 스크롤하지 않아도 됩니다. 이 시각적 표시 영역 사용자 주도 스크롤 상호작용도 완료되면 scrollend 이벤트를 내보내므로 안심하세요.

이벤트 사용

다른 스크롤 이벤트와 마찬가지로 몇 가지 방법으로 리스너를 등록할 수 있습니다.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

또는 이벤트 속성을 사용합니다.

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Polyfill 및 점진적 개선

지금 이 새로운 이벤트를 사용하려는 경우 Google의 가장 유용한 조언은 다음과 같습니다. 현재 스크롤 종료 전략이 있는 경우 계속 사용할 수 있으며 시작 시 다음을 통해 지원을 확인할 수 있습니다.

'onscrollend' in window
// true, if available

이 경우 브라우저에서 이벤트를 제공하는지에 따라 true 또는 false가 보고됩니다. 이 검사를 통해 코드를 브랜치할 수 있습니다.

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

scrollend 이벤트를 사용할 수 있을 때 점진적으로 개선하는 것이 좋습니다. 브라우저에서 최선을 다하는 polyfill(NPM)을 사용해 볼 수도 있습니다.

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

가능한 경우 브라우저에 내장된 scrollend 이벤트를 사용하도록 polyfill이 점진적으로 개선됩니다. 사용할 수 없는 경우 스크립트는 포인터 이벤트를 감시하고 스크롤하여 종료되는 이벤트를 가장 정확하게 추정합니다.

사용 사례

스크롤이 발생하는 동안에는 계산에 많은 부담을 주는 작업을 피하는 것이 좋습니다. 이렇게 하면 스크롤이 최대한 많은 메모리와 처리를 자유롭게 사용할 수 있으므로 환경을 원활하게 유지할 수 있습니다. scrollend 이벤트를 사용하면 스크롤이 더 이상 발생하지 않으므로 번거로운 작업을 호출할 수 있는 완벽한 시간을 제공합니다.

scrollend 이벤트는 다양한 작업을 트리거하는 데 사용할 수 있습니다. 일반적인 사용 사례는 연결된 UI 요소를 스크롤이 중지된 위치와 동기화하는 것입니다. 예: - 캐러셀 스크롤 위치를 점 표시기와 동기화 - 갤러리 항목을 메타데이터와 동기화. - 사용자가 새 탭으로 스크롤한 후 데이터를 가져옵니다.

사용자가 이메일을 스와이프하는 등의 시나리오를 상상해 보세요. 스와이프가 끝나면 사용자가 스크롤한 위치에 따라 작업을 실행할 수 있습니다.

프로그래매틱 방식 또는 사용자 스크롤 또는 로깅 분석과 같은 작업 후 동기화에도 이 이벤트를 사용할 수 있습니다.

다음은 화살표, 점, 포커스와 같은 여러 요소를 스크롤 위치에 따라 업데이트해야 하는 좋은 예입니다. 제가 YouTube에서 이 캐러셀을 만든 방법 보기 라이브 데모도 사용해 보세요.

이 프로젝트를 위해 엔지니어링해 준 메디 카제미와 API 및 구현 가이드를 제공해 준 로버트 플랙에게 감사의 인사를 전합니다.