[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: 보여지는 브라우저 크기