scroll event_JavaScript
세로 값:y 가로 값:x
y축의 수직 위치
window.scrollY
y축의 하단값 위치
window.scrollY + window.innerHeight
브라우저의 현재 높이(viewport)
window.innerHeight
브라우저 호환성
scrollY와 pageYoffset은 같은 속성이다.
오래된 브라우저의 경우 scrollY(IE9미만)를 지원하지 않을 수도 있어서
pageYoffset 사용을 권장
window.pageYOffset === window.scrollY
사용법
window.addEventLisner('scroll', 함수호출);
현재의 스크롤 값 확인
document.documentElement.scrollTop
const now = window.scrollTop
scrollTop: 현재 내려온 정도.
보통 스크롤 한번에 100px 내려온다 (따로 설정할 수 있음)
스크롤 최적화
throttle 함수를 사용해서 스크롤 이벤트가 트리거되는 정도를 조절할 수 있다
ex) 300ms 마다 onScroll이 호출되도록 이벤트 등록
window.addEventListener('scroll', throttle(onScroll, 300))
이미지 절반위치의 좌표 구하기
Author And Source
이 문제에 관하여(scroll event_JavaScript), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@suminllll/scroll-eventJavaScript저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)