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

제한 시간 함수를 삭제하고 버그를 제거하세요. 정말로 필요한 이벤트는 scrollend입니다.

Adam Argyle

scrollend 이벤트 이전에는 스크롤이 완료되었음을 감지하는 안정적인 방법이 없었습니다. 즉, 이벤트가 늦게 실행되거나 사용자의 손가락이 여전히 화면에 있는 동안 실행되었습니다. 스크롤이 실제로 언제 종료되었는지 알 수 없는 이러한 불안정성으로 인해 버그가 발생하고 사용자 환경이 저하되었습니다.

이전

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

이 setTimeout() 전략이 할 수 있는 최선은 100ms에서 스크롤이 중지되었는지 확인하는 것입니다. 이렇게 하면 스크롤 종료 이벤트가 아닌 스크롤 일시중지 이벤트와 더 유사해집니다.

scrollend 이벤트 후 브라우저는 이 모든 어려운 평가를 대신 수행합니다.

이후

document.onscrollend = event => {…}

좋은 재료네요. 방출하기 전에 완벽한 타이밍에 의미 있는 조건으로 가득 차 있습니다.

Browser Support

• 114
• 114
• 109
• 26.2

Source

사용해 보기

이벤트 세부정보

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

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

이 이벤트가 웹 플랫폼에 도입되는 데 시간이 오래 걸린 이유는 사양 세부정보가 필요한 작은 세부정보가 많았기 때문입니다. 가장 복잡한 영역 중 하나는 시각적 표시 영역과 문서의 scrollend 세부정보를 명확히 하는 것이었습니다. 확대하는 웹페이지를 생각해 보세요. 이 확대 상태에서 스크롤할 수 있으며 반드시 문서를 스크롤하는 것은 아닙니다. 이러한 시각적 표시 영역 사용자 기반 스크롤 상호작용도 완료되면 scrollend 이벤트를 전송합니다.

이벤트 사용

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

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

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

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

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 및 구현 가이드를 제공한 로버트 플랙에게 감사의 말씀을 전합니다.