숙제1. 페이지 스크롤바 100px 내리면 로고 폰트사이즈 작게
페이지 스크롤바를 100px 이상 내리면 폰트사이즈 작게만들라고 코드짜면 됩니다.
근데 이 코드를 언제 실행해야되겠습니까
<script>
if (window.scrollY > 100) {
$('.navbar-brand').css('font-size', '20px');
}
</script>대충 <script> 태그 안에 적으면 페이지 로드할 때 1회 실행되고 끝날 뿐입니다.
유저가 페이지 스크롤바 건드릴 때 마다 코드를 실행해줘야 잘되지 않을까요 한번 생각해보십시오.
<script>
$(window).on('scroll', function(){
if (window.scrollY > 100) {
$('.navbar-brand').css('font-size', '20px');
}
});
</script>스크롤바 만질 때 마다 코드 실행하고싶으면 스크롤 이벤트리스너 쓰면 됩니다.
아무튼 이러면 잘 실행됩니다.
다시 스크롤바 올리면 폰트사이즈 크게만들고 싶으면 어떻게 해야할까요 알아서 해봅시다.
숙제2. 회원약관 박스 거의 끝까지 스크롤하면 alert 띄우기
이것은 저번시간에 div 박스 찾아서
div 박스 스크롤양 + 보이는높이 == 실제높이 비교하면 된다고 했습니다.
근데 정확히 일치하는 경우는 잘 없어서 등호말고 부등호 이런거 쓰면 됩니다.
$('.lorem').on('scroll', function(){
var 스크롤양 = document.querySelector('.lorem').scrollTop;
var 실제높이 = document.querySelector('.lorem').scrollHeight;
var 높이 = document.querySelector('.lorem').clientHeight;
if (스크롤양 + 높이 > 실제높이 - 10) {
alert('다읽음')
}
});이러면 바닥~ 10px 위치에 스크롤바가 있을 때 alert를 띄워줍니다.
진짜인지 10이라는 숫자 맘대로 바꿔가면서 실험해봅시다.
스크롤 다룰 때 주의점
1. 스크롤이벤트리스너 안의 코드는 1초에 60번 이상 실행됩니다.
그래서 스크롤 이벤트리스너는 많이 달면 성능저하가 일어나니 스크롤바 1개마다 1개만 씁시다.
2. 스크롤이벤트리스너 안의 코드는 1초에 여러번 실행되다보니 바닥체크하는 코드도 여러번 실행될 수 있습니다.
숙제2에서 alert가 2번 뜨고 그럴 수 있다는 뜻입니다.
그걸 방지하고 싶으면 구글에 검색해보는 것도 나쁘지않습니다. 변수같은걸 활용하면 됩니다.
현재 페이지를 끝까지 스크롤했는지 체크하려면?
숙제2랑 똑같이하면 됩니다.
근데 div 박스를 찾는게 아니라 이번엔 현재페이지를 찾아서 .scrollTop .scrollHeight .clientHeight 붙이면 됩니다.
현재페이지를 찾으려면
document.querySelector('html').scrollTop; //현재 웹페이지 스크롤양
document.querySelector('html').scrollHeight; //현재 웹페이지 실제높이
document.querySelector('html').clientHeight; //현재 웹페이지 보이는 높이임html 태그 찾으면 됩니다.
.scrollTop 은 너무 길면 window.scrollY 써도 똑같습니다.
(주의)
1. 웹페이지 scrollHeight 구할 땐 브라우저마다 아주 약간의 오차가 있을 수 있어서 테스트해보는게 좋습니다.
2. 웹페이지 scrollHeight 구하는 코드는 페이지 로드가 완료되고나서 실행해야 정확합니다. 그래서 <body> 끝나기 전에 적는게 좋습니다.
오늘의 교훈이 뭐냐면
저런거 코드 외워봤자 다음날 다 까먹습니다.
1. 스크롤바 조작할 때 마다 코드실행가능하구나
2. 박스의 숨겨진 실제 높이도 구할 수 있구나
3. 스크롤내린 양도 구할 수 있군
이런거 이해하고 지나가면 충분합니다. 문법은 필요할 때 찾아쓰면 됩니다.
(응용)
페이지 내릴 때 마다 페이지를 얼마나 읽었는지 진척도를 알려주는 UI 같은건 어떻게 만들면 될까요?
까만색의 가로로 긴 div 박스 하나 만들고
페이지를 1% 읽으면 div 박스 길이는 1%
페이지를 50%정도 읽으면 div 박스 길이는 50%
페이지 다 읽으면 div 박스 길이는 100%
이런거 만들어보면 재미있을듯요
실은 간단해서 재미없습니다
'코딩 > 자바스크립트 인강' 카테고리의 다른 글
| Select 2 : 자바스크립트로 html 생성하는 법 (0) | 2023.03.09 |
|---|---|
| 이벤트 버블링 응용과 dataset (0) | 2023.03.08 |