Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 깃허브 레포지토리와 로컬 코드 연결하기
- DIGITALHANARO
- github
- 디지털하나로입학식
- Next.js
- 프론트엔드배포
- 맥북백틱입력
- 웅진씽크빅
- 개발자교육과정
- 스나이퍼팩토리
- 디지털교육
- 버전생성프로세스
- 부트캠프
- 하나은행
- 디지털취업
- 프론트엔드개발자양성과정
- 미래내일일경험
- udemy
- 취준생
- 네이버로그인창만들기
- 맥북백틱
- 배포
- 백틱
- kdt
- 프로젝트캠프
- `
- 유데미
- 디지털하나로
- s3
Archives
- Today
- Total
Land of Joe
[JavaScript] 스크롤 이벤트 본문
window.addEventListener('scroll', function(){동작});
window: 현재 html 페이지를 의미함
(document와 비슷하지만
스크롤 이벤트를 감지하고 싶을 때엔 관습적으로 window 사용,
window>document)
스크롤 관련 동작으로는
window.scrollY
: 위에서부터 얼마나 스크롤했는지 알려줌 (px단위)
window.scrollX
: 왼쪽에서부터 얼마나 스크롤했는지 알려줌
<script>
window.addEventListener('scroll', function(){
console.log(window.scrollY)
});
</script>
jQuery 버전: $(window).scrollTop()
window.scrollTo(x,y)
: 강제로 스크롤바를 움직여서 그 위치에 고정됨
<script>
window.addEventListener('scroll', function(){
window.scrollTo(0, 100)
});
</script>
jQuery 버전: $(window).scrollTop(숫자)
window.scrollBy(x,y)
: 현재 위치에서부터 스크롤 해서 그 위치에 고정됨
<script>
window.addEventListener('scroll', function(){
window.scrollBy(0, 100)
});
</script>
✓ 주의: bootstrap 설치했을 경우 스크롤 이동이 느릿느릿함
css 파일 맨 위에 :root { scroll-behavior : auto } 를 추가하면 해결된다.
window 스크롤바를 100 이상 내렸을 때 로고 폰트사이즈 줄이기
<script>
window.addEventListener('scroll',function(){
if(window.scrollY>100) {
document.querySelector().style.fontSize='20px'; //$().css('font-size','20px')
} else {
document.querySelector().style.fontSize='30px';
}
});
</script>
if문부터 시작할 경우
페이지 로드 시 1회 작동되는 때에
if문 조건에 해당하지 않기 때문에 작동하지 않음.
그러므로 스크롤바를 움직일 때마다 if문을 훑도록
addEventlistner를 추가해주어야 함.
그렇다면 window가 아닌
div 박스의 스크롤바 내린 양을 구하고 싶으면?
(ex.회원약관 박스 끝까지 내리기)
<script>
document.querySelector().addEventListener('scroll',function(){
var 스크롤양 = document.querySelector().scrollTop;
console.log(스크롤양);
});
</script>
window에선 .scrollY였지만
일반 div 박스에선 셀렉터.scrollTop!!
div 박스 스크롤을 끝까지 내렸을 때 알림 띄우기
스크롤바 내린 양 + 눈에 보이는 div박스의 높이 == div박스의 스크롤 가능한 실제 높이
<div class="lorem" style="width : 200px; height : 100px; overflow-y : scroll">
</div>
<script>
document.querySelector('.lorem').addEventListener('scroll', function(){
var 스크롤양 = document.querySelector('.lorem').scrollTop()
var 높이 = document.querySelector('.lorem').clientHeight()
var 실제높이 = document.querySelector('.lorem').scrollHeight()
if (스크롤양+높이 >= 실제높이-10) {
alert('스크롤 완료');
}
});
</script>
✓ 소수점 오차 발생을 대비하여 10px 정도 넉넉하게 잡아준다
✓ 추가
document.documentElement
= document.querySelector('html')
= window
document.querySelector('html').clientHeight: 보여지는 브라우저 크기
'🌐 Web > 🟡 JavaScript' 카테고리의 다른 글
[JavaScript] function 문법 (0) | 2022.11.22 |
---|---|
[JavaScript] 문자 중간에 변수 넣기(백틱) (0) | 2022.10.18 |
[JavaScript] 이벤트 버블링 (0) | 2022.10.12 |
[JavaScript] 탭 기능 구현하기, for 반복문 (0) | 2022.10.11 |
[JavaScript] setTimeout, setInterval 타이머 설정하기 (1) | 2022.10.05 |