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

시간 초과 함수를 삭제하고 버그를 제거합니다. 다음은 정말로 필요한 이벤트입니다. scrollend

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
});

또는 event 속성을 사용합니다.

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

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

폴리필 및 점진적 개선

지금 이 새로운 이벤트를 사용하려면 다음 조언을 따르세요. 현재 스크롤 종료 전략이 있는 경우 이를 계속 사용하고 시작 시 다음을 사용하여 지원을 확인할 수 있습니다.

'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 이벤트를 사용할 수 있을 때 점진적으로 개선하는 데 도움이 됩니다. 브라우저에서 최선을 다하는 제가 만든 폴리필(NPM)을 사용해 볼 수도 있습니다.

import {scrollend} from "scrollyfills"

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

가능한 경우 브라우저 내장 scrollend 이벤트를 사용하도록 폴리필이 점진적으로 개선됩니다. 사용할 수 없는 경우 스크립트는 포인터 이벤트를 감시하고 스크롤하여 이벤트 종료에 관한 최선의 추정치를 산출합니다.

사용 사례

스크롤이 진행되는 동안 계산량이 많은 작업을 피하는 것이 좋습니다. 이렇게 하면 스크롤이 원활한 환경을 유지하기 위해 최대한 많은 메모리와 처리를 자유롭게 사용할 수 있습니다. scrollend 이벤트를 사용하면 스크롤이 더 이상 발생하지 않으므로 호출하고 힘든 작업을 실행하기에 적합한 시점이 됩니다.

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

사용자가 이메일을 스와이프하는 등의 시나리오를 생각해 보세요. 스와이프가 완료되면 스크롤한 위치를 기반으로 작업을 실행할 수 있습니다.

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

다음은 화살표, 점, 포커스와 같은 여러 요소가 스크롤 위치를 기반으로 업데이트되어야 하는 좋은 예입니다. YouTube에서 이 캐러셀을 만든 방법을 확인해 보세요. 실시간 데모를 사용해 보세요.

이 문제와 관련하여 엔지니어링 작업을 수행한 메디 카제미님과 API 및 구현 안내를 제공해 주신 로버트 플랙님께 감사드립니다.