이번 시간에는 스크롤 이벤트에 관해 정리해보자!!
요즘 프론트엔드의 트렌드가 스크롤 이벤트를 이용한 사이트를 구현하는 것이다. 스크롤의 위치에 따라서 싸이트가 반응하는 구조인데, 요즘은 이것을 안 하는 싸이트를 찾아보기가 더 힘들다.
개인적으로 스크롤 이벤트를 인상깊게 사용한 싸이트 하나를 소개한다.
- 시간적 여유가 되면, 꼭 이 테크닉도 익혀보도록 하자!!
스크롤 이벤트리스너
window.addEventListener('scroll', function(){
console.log('안녕')
});
스크롤바를 조작하면 scroll 이벤트가 발생합니다.
그래서 scroll 이벤트리스너를 전체 페이지에 달면
전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있습니다.
진짜 스크롤바 만질 때 마다 '안녕' 출력되나 봅시다.
참고로 window는 그냥 전체 페이지를 의미합니다.
실은 document도 전체 페이지입니다. window가 약간 더 큰 개념인데 scroll 이벤트리스너는 관습적으로 window에 붙임
스크롤 관련 유용한 기능들
스크롤 이벤트리스너안에서 쓰는 유용한 기능들이 몇개 있습니다.
scrollY
window.addEventListener('scroll', function(){
console.log( window.scrollY )
});
window.scrollY 사용하면 현재 페이지를 얼마나 위에서 부터 스크롤했는지 px 단위로 알려줍니다.
매우유용
window.scrollX 는 가로로 얼마나 스크롤했는지 알려줍니다. (가로 스크롤바가 있으면)
단, scrollY나 X는 window에만 붙일 수있다. div같은 다른 태그들에는 사용할 수없다.
div같은 태그들에게는셀렉터.scrollTop을 사용하자!!
scrollTo
window.scrollTo(0, 100)
window.scrollTo(x, y) 실행하면 강제로 스크롤바를 움직일 수 있습니다.
위 코드는 위에서부터 100px 위치로 스크롤해줍니다.
scrollBy
window.scrollBy(0, 100)
window.scrollBy(x, y) 실행하면 현재 위치에서부터 스크롤해줍니다.
위 코드는 현재 위치에서부터 +100px 만큼 스크롤해줍니다.
근데 원래 저거 실행하면 스크롤 위치가 순간이동해야되는데
bootstrap을 설치했을 경우 이상하게 천천히 이동할 수 있습니다.
그게 싫으면 :root { scroll-behavior : auto } 이걸 css 파일 맨 위에 추가합시다.
scrollTop
$(window).on('scroll', function(){
$(window).scrollTop();
})
jQuery 버전은 더 짧습니다.
$(window).scrollTop() 이거 쓰면 아까처럼 현재 페이지 스크롤 양을 알려줍니다.
근데 간편한건 $(window).scrollTop(100) 이러면 페이지 강제이동도 해줌
overflow-y: scroll;
이것은 CSS에 사용하는 속성값인데,
내용물이 넘치면 스크롤바를 생성해준다.
div 박스의 스크롤바 내린 양은??
박스를 셀렉터로 찾고 .scrollTop 붙이면 스크롤바를 위에서 부터 얼마나 내렸는지 알려줍니다.
$('.lorem').on('scroll', function(){
var 스크롤양 = document.querySelector('.lorem').scrollTop;
console.log(스크롤양);
});
콘솔창에 진짜 출력되는군요.
실은 현재 페이지 스크롤양도 .scrollTop으로 구할 수 있습니다. html 태그 찾아서 .scrollTop 붙이면 됩니다.
div 박스 높이 구하는 법
스크롤바가 생긴 박스의 경우 실제 높이같은게 궁금할 수 있습니다.
박스에 스타일로 넣은 height : 100px 이거 말고 스크롤가능한 실제높이 말입니다.
그럴 땐 셀렉터로 찾아서 .scrollHeight 붙이면 나옵니다.
$('.lorem').on('scroll', function(){
var 스크롤양 = document.querySelector('.lorem').scrollTop;
var 실제높이 = document.querySelector('.lorem').scrollHeight;
console.log(스크롤양, 실제높이);
});
콘솔창에 진짜 출력되는군요.
참고로 박스가 화면에 보이는 부분 높이는 .clientHeight 하면 나옵니다.
document.querySelector('.lorem').scrollHeight; 해보셈
.clientHeight는 박스의 height가 100px이면, 걍 100이라고 찍힌다.
스크롤 내릴 때, 이벤트 발생시 주의사항
스크롤 내린 양은 정수단위로 나오지 않고
OS 마다 부정확해서 여유를 두고 비교하는게 좋습니다.
그래서 끝까지 스크롤했냐~ 체크하는 것 보다
끝에서 10px 정도 남기고 스크롤했냐~ 라고 체크해봅시다.
스크롤 다룰 때, 주의점
- 스크롤이벤트리스너 안의 코드는 1초에 60번 이상 실행됩니다.
그래서 스크롤 이벤트리스너는 많이 달면 성능저하가 일어나니 스크롤바 1개마다 1개만 씁시다.
- 스크롤이벤트리스너 안의 코드는 1초에 여러번 실행되다보니 바닥체크하는 코드도 여러번 실행될 수 있습니다.
스크롤을 맨 밑으로 내렸을 때, alert를 실행한다고 하면,
=> alert가 2번 뜨고 그럴 수 있다는 뜻입니다.
그걸 방지하고 싶으면 구글에 검색해보는 것도 나쁘지않습니다. 변수같은걸 활용하면 됩니다.
현재 페이지를 끝까지 스크롤했는지 체크하려면?
div 박스를 찾는게 아니라 이번엔 현재페이지를 찾아서 .scrollTop .scrollHeight .clientHeight 붙이면 됩니다.
현재페이지를 찾으려면
document.querySelector('html').scrollTop; //현재 웹페이지 스크롤양
document.querySelector('html').scrollHeight; //현재 웹페이지 실제높이
document.querySelector('html').clientHeight; //현재 웹페이지 보이는 높이임
html 태그 찾으면 됩니다.
.scrollTop 은 너무 길면 window.scrollY 써도 똑같습니다.
(주의)
-
웹페이지 scrollHeight 구할 땐 브라우저마다 아주 약간의 오차가있을 수 있어서 테스트해보는게 좋습니다.
-
웹페이지 scrollHeight 구하는 코드는 페이지 로드가 완료되고나서 실행해야 정확합니다. 그래서 끝나기 전에 적는게 좋습니다.
스크롤 어디까지 알고 넘어가야 하나??
-
스크롤바 조작할 때 마다 코드실행가능하구나
-
박스의 숨겨진 실제 높이도 구할 수 있구나
-
스크롤내린 양도 구할 수 있군
이런거 이해하고 지나가면 충분합니다. 문법은 필요할 때 찾아쓰면 됩니다.
페이지 내릴 때 마다 페이지를 얼마나 읽었는지 진척도를 알려주는 UI 같은건 어떻게 만들면 될까요?
까만색의 가로로 긴 div 박스 하나 만들고
페이지를 1% 읽으면 div 박스 길이는 1%
페이지를 50%정도 읽으면 div 박스 길이는 50%
페이지 다 읽으면 div 박스 길이는 100%
이런거 만들어보면 재미있을듯요
실은 간단해서 재미없습니다
FullPage 스크롤 이벤트 사용시, 주의사항
