스크롤 이벤트

스크롤 이벤트

페이지 스크롤바 100px 내리면 로고 폰트사이즈 작게만들기

 <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <span class="navbar-brand">JS SHOP</span>
            <span class="ms-auto max-3 badge bg-drk">dark</span>
            <button class="navbar-toggler">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>

window.addEventListener("scroll", function (e) {
	let scroll = window.scrollY;
    if (scroll >= 100) {
    	document.querySelector(".navbar-brand").style.fontSize = "20px"
	} else {
		document.querySelector(".navbar-brand").style.fontSize = "30px"
	}

        
});

이용동의 약관처럼 아래로 다 읽으면 alert창 띄우기

<div style="width: 300px; height: 100px; overflow-y: auto;" id="box-height"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit
        debitis at, laborum ipsa itaque placeat sit, excepturi eius. Nostrum perspiciatis, eligendi quae consectetur
        praesentium exercitationem.
</div>
<div style="height: 1500px;">
	        
</div>

let box = document.querySelector("#box-height");
    box.addEventListener("scroll", function () {
        let boxHeight= document.querySelector("#box-height").scrollTop;
        let Height= document.querySelector("#box-height").scrollHeight;
        console.log(boxHeight);
        console.log(Height);
        if (boxHeight + 100 == Height) {
            alert("다 읽었습니다.")
        }
    })

스크롤 이벤트시 주의사항

1. 스크롤이벤트리스너 안의 코드는 1초에 60번 이상 실행됩니다. 그래서 스크롤 이벤트리스너는 많이 달면 성능저하가 일어난다

2. 스크롤이벤트리스너 안의 코드는 1초에 여러번 실행되다보니 바닥체크하는 코드도 여러번 실행될 수 있다.

스크롤 이벤트 참고

document.querySelector('html').scrollTop;  //현재 웹페이지 스크롤양
document.querySelector('html').scrollHeight; //현재 웹페이지 실제높이
document.querySelector('html').clientHeight; //현재 웹페이지 보이는 높이임