시간 제한 함수를 삭제하고 버그를 제거하세요. 정말 필요한 이벤트가 있습니다. scrollend를 사용하면 됩니다.
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 및 점진적 개선
지금 이 새 이벤트를 사용하려는 경우 다음과 같은 것이 좋습니다. 현재 스크롤 종료 전략 (있는 경우)을 계속 사용할 수 있으며 시작 시 다음을 통해 지원을 확인할 수 있습니다.
'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 및 구현 가이드를 제공해 주신 로버트 플랙님께 감사드립니다.