시간 제한 함수를 삭제하고 버그를 떨어뜨립니다. 꼭 필요한 이벤트인 스크롤end를 살펴보겠습니다.
scrollend
이벤트 이전에는 스크롤을 감지할 수 있는 안정적인 방법이 없었습니다.
완료되었습니다. 즉, 이벤트가 늦게 시작되거나 사용자가 손가락으로
계속 화면 위에 있었어. 이러한 불안정성 때문에 스크롤에 의해
버그와 사용자 경험이 저하될 수 있습니다.
document.onscroll = event => { clearTimeout(window.scrollEndTimer) window.scrollEndTimer = setTimeout(callback, 100) }
이 setTimeout()
전략에서 할 수 있는 최선의 방법은 스크롤이 중지되었는지 파악하는 것입니다.
100ms
입니다. 이렇게 하면 스크롤에 의한 것이 아니라 스크롤이 이벤트를 일시중지한 것처럼 됩니다.
종료된 이벤트입니다.
그런 다음
scrollend
드림
브라우저가 이 모든 어려운 평가를 대신 수행합니다.
document.onscrollend = event => {…}
그거 좋은 겁니다. 의미 있는 조건들로 가득한 완벽한 타이밍 가 필요합니다.
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
실습
이벤트 세부정보
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
이벤트를 점진적으로 개선하기 위한 건전한 시작입니다.
을(를) 사용할 수 있습니다. 다음을 시도해 볼 수도 있습니다.
폴리필
(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 및 구현 가이드를 제공해 준 로버트 플랙에게 감사의 인사를 전합니다.