window.addEventListener('scroll', function(){
console.log('안녕')
});
스크롤바를 조작하면 scroll 이벤트가 발생합니다.
그래서 scroll 이벤트리스너를 전체 페이지에 달면
전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있습니다.
진짜 스크롤바 만질 때 마다 '안녕' 출력되나 봅시다.
참고로 window는 그냥 전체 페이지를 의미합니다.
실은 document도 전체 페이지입니다. window가 약간 더 큰 개념인데 scroll 이벤트리스너는 관습적으로 window에 붙임
스크롤 이벤트리스너안에서 쓰는 유용한 기능들이 몇개 있습니다.
window.addEventListener('scroll', function(){
console.log( window.scrollY )
});
window.scrollY 사용하면 현재 페이지를 얼마나 위에서 부터 스크롤했는지 px 단위로 알려줍니다.
매우유용
window.scrollX 는 가로로 얼마나 스크롤했는지 알려줍니다. (가로 스크롤바가 있으면)
window.scrollTo(0, 100)
window.scrollTo(x, y)
실행하면 강제로 스크롤바를 움직일 수 있습니다.
위 코드는 위에서부터 100px 위치로 스크롤해줍니다.
window.scrollBy(0, 100)
window.scrollBy(x, y)
실행하면 현재 위치에서부터 스크롤해줍니다.
위 코드는 현재 위치에서부터 +100px 만큼 스크롤해줍니다.
근데 원래 저거 실행하면 스크롤 위치가 순간이동해야되는데
bootstrap을 설치했을 경우 이상하게 천천히 이동할 수 있습니다.
그게 싫으면 :root { scroll-behavior : auto } 이걸 css 파일 맨 위에 추가합시다.
.navbar {
position : fixed;
width : 100%;
z-index : 5
}
.navbar-brand {
font-size : 30px;
transition : all 1s;
}
일단 상단메뉴는 상단고정하고
로고 폰트사이즈를 키운 채로 시작합시다.
그리고 스크롤바를 100px 정도 내리면 폰트사이즈를 줄여봅시다.
<script>
document.querySelector(window).addEventListener('scroll', function(){
if (window.scrollY > 100) {
document.querySelector('.navbar-brand').style.font-size ="20px";
}
});
</script>
현재페이지를 찾아서 .scrollTop .scrollHeight .clientHeight 붙이면 됩니다.
현재페이지를 찾으려면
document.querySelector('html').scrollTop; //현재 웹페이지 스크롤양
document.querySelector('html').scrollHeight; //현재 웹페이지 실제높이
document.querySelector('html').clientHeight; //현재 웹페이지 보이는 높이임
html 태그 찾으면 됩니다.
.scrollTop 은 너무 길면 window.scrollY 써도 똑같습니다.
(주의)
웹페이지 scrollHeight 구할 땐 브라우저마다 아주 약간의 오차가있을 수 있어서 테스트해보는게 좋습니다.
웹페이지 scrollHeight 구하는 코드는 페이지 로드가 완료되고나서 실행해야 정확합니다. 그래서 끝나기 전에 적는게 좋습니다.
위 박스를 아무데나 추가합시다.
회원약관인데 이 박스를 끝까지 스크롤하면 alert() 이런걸 띄우고 싶은겁니다.
그럼 코드를 어떻게 짜야할까요
div 스크롤바 내린 양 == div 실제높이일 경우 alert 띄워주세요~
이렇게 짜면 될듯요?
"페이지 스크롤바 내린 양" 구하는건 알겠는데,
"div 박스 스크롤바 내린 양" 구하는 법은 ?
박스를 셀렉터로 찾고 .scrollTop 붙이면 스크롤바를 위에서 부터 얼마나 내렸는지 알려줍니다.
$('.lorem').on('scroll', function(){
var 스크롤양 = document.querySelector('.lorem').scrollTop;
console.log(스크롤양);
});
콘솔창에 진짜 출력되는군요.
실은 현재 페이지 스크롤양도 .scrollTop으로 구할 수 있습니다. html 태그 찾아서 .scrollTop 붙이면 됩니다.
스크롤바가 생긴 박스의 경우 실제 높이같은게 궁금할 수 있습니다.
박스에 스타일로 넣은 height : 100px 이거 말고 스크롤가능한 실제높이 말입니다.
그럴 땐 셀렉터로 찾아서 .scrollHeight 붙이면 나옵니다.
$('.lorem').on('scroll', function(){
var 스크롤양 = document.querySelector('.lorem').scrollTop;
var 실제높이 = document.querySelector('.lorem').scrollHeight;
console.log(스크롤양, 실제높이);
});
콘솔창에 진짜 출력되는군요.
참고로 박스가 화면에 보이는 부분 높이는 .clientHeight 하면 나옵니다.
document.querySelector('.lorem').scrollHeight;
▲ 뭔가 이상한데요
스크롤바를 끝까지 내려도
스크롤바 내린 양은 188.x
div 실제높이는 288이 나옵니다.
같다고 비교하면 뭔가 안될 것 같군요.
▲ 왜냐면 스크롤바 내린 양은 진짜 스크롤바 내린 양일 뿐이라 그렇습니다.
거기에 박스가 보이는 높이는 포함안함
div 스크롤바 내린 양 + div가 화면에 보이는 높이 == div 실제높이일 경우 alert 띄워주세요~
라고 코드짜면 될듯 합니다.
하지만
스크롤 내린 양은 정수단위로 나오지 않고
OS 마다 부정확해서 여유를 두고 비교하는게 좋습니다.
그래서 끝까지 스크롤했냐~ 체크하는 것 보다
끝에서 10px 정도 남기고 스크롤했냐~ 라고 체크해봅시다.
document.querySelectorAll('.lorem').addEventListener('scroll', function(){
var 스크롤양 = document.querySelector('.lorem').scrollTop;
var 실제높이 = document.querySelector('.lorem').scrollHeight;
var 높이 = document.querySelector('.lorem').clientHeight;
if (스크롤양 + 높이 > 실제높이 - 10) {
alert('다읽음')
}
});
이러면 바닥~ 10px 위치에 스크롤바가 있을 때 alert를 띄워줍니다.