Hjin Blog
javascript기초(스크롤 이벤트) 본문
스크롤 이벤트리스너
스크롤바를 조작하면 scroll 이벤트가 발생하는것을 말하는데,
window.addEventListener('scroll', function(){
console.log('hello')
});전체 페이지(window)를 스크롤 할때마다 원하는 코드를 실행할수 있다.
위코드는 스크롤 했을때 hello 문구를 띄우게 된다.
document도 전체 페이지를 의미하지만
window가 약간 더 큰 개념이고 scroll 이벤트리스너는 관습적으로 window에 붙인다고 한다.
스크롤 관련 기능들
scrollY
window.addEventListener('scroll', function(){
console.log( window.scrollY )
});
// 현재 페이지를 얼마나 위에서 부터 스크롤했는지 알려줌.
scrollTo
window.scrollTo(0, 100)
// 강제로 스크롤바를 움직일수 있다 위 코드는 위에서부터 100px 스크롤해줌.
scrollTop
$(window).on('scroll', function(){
$(window).scrollTop();
})
// 현재 페이지 스크롤 양을 알려줌.
**bootstrap을 설치했을 경우 이상하게 천천히 이동할 수 있는데
해당 기능을 실행하고 싶지 않을경우 :root { scroll-behavior : auto } 이걸 css 파일 맨 위에 추가한다.
응용)
// div의 스크롤바 내린 양 눈에보이는div높이 == div의 실제높이
$('.lorem').on('scroll',function(){
var 스크롤양 = document.querySelector('.lorem').scrollTop; //스크롤바를 내린양
var 실제높이 = document.querySelector('.lorem').scrollHeight; //스크롤 가능한 실제높이
var 높이 = document.querySelector('.lorem').clientHeight;// 박스의 높이
if(스크롤양 + 높이 >= 실제높이 ){
alert('다읽음');
}
console.log(스크롤양,실제높이,높이);
});
스크롤을 전부 내렸을때 alert 창을 띄워주는 코드이다.
scrollTop은 스크롤바를 내린양을 구해줄뿐 박스의 높이는 포함하지 않는다.
scrollHeight = 스크롤이 가능한 실제 높이
clientHeight = 실제 박스의 높이
**scroll 이벤트를 쓸때 주의점
scroll 이벤트리스너 안의 코드는 1초에 60번 이상 실행된다.
그래서 스크롤 이벤트리스너는 많이 달면 성능저하가 일어나니 스크롤바 1개마다 1개만 쓰는것이 좋다.
따라서 위와 같은 코드도 alert가 여러번 실행될수 있다.
**
1. 웹페이지 scrollHeight 구할 땐 브라우저마다 아주 약간의 오차가있을 수 있어서 테스트해보는게 좋다.
2. 웹페이지 scrollHeight 구하는 코드는 페이지 로드가 완료되고나서 실행해야 정확하다.
그래서 <body> 끝나기 전에 적는게 좋습니다.
'Javascript' 카테고리의 다른 글
| javascript기초(이벤트 버블링) (0) | 2022.11.14 |
|---|---|
| javascript기초(for 반복문) (0) | 2022.11.14 |
| javascript기초 (return 문법) (0) | 2022.11.14 |
| javascript기초 (이미지 슬라이드 만들기) (0) | 2022.11.14 |
| javascript기초(정규식 문법) (0) | 2022.11.03 |
