👨💻 스크롤 방향 감지하기(마우스 스크롤 위아래)
안녕하세요 TriplexLab입니다 :)
오늘은 javascript 스크롤 방향 감지하기에 관해서 간단하게 정리하겠습니다.
✍️ 스크롤 방향 감지하기 코드
* {
margin: 0; padding: 0; box-sizing: border-box;
}
.clearfix::after { content: ''; clear: both; display: block;}
.navInner {width: 100%; position: fixed; top: 0; background-color: #fff; padding: 20px; box-sizing: border-box; transition: top 0.4s ease-in-out;}
.logo {float: left;}
.menu_inner {float: right; margin-top: 10px;}
.menu_inner li {display: inline-block; vertical-align: middle;}
.contents {width: 50%; box-shadow: 4px 4px 20px rgb(192, 192, 192); border-radius: 20px; margin-left: 20px; margin-top: 140px; padding: 20px; }
.top {position: fixed; bottom: 10px; right: 10px;visibility: hidden; opacity: 0; transition: right 0.4s ease-in-out;}
.top.show {visibility: visible; opacity: 1;}
.top.show-right {right: -100%;}
.navInner.shadow { box-shadow: 4px 4px 20px rgb(192, 192, 192); }
.navInner.lift-up {top: -100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="clearfix navInner" id="nav">
<h1 class="logo">LOGO</h1>
<ul class="menu_inner">
<li>menu-1</li>
<li>menu-2</li>
<li>menu-3</li>
<li>menu-4</li>
</ul>
</div>
<div class="contents">
<h2>What is Loream Ipsum?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga dolores qui provident minima commodi hic dolor sint quisquam quibusdam recusandae. Facere consequatur incidunt laborum vitae earum, ducimus dignissimos eum illo.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga dolores qui provident minima commodi hic dolor sint quisquam quibusdam recusandae. Facere consequatur incidunt laborum vitae earum, ducimus dignissimos eum illo.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga dolores qui provident minima commodi hic dolor sint quisquam quibusdam recusandae. Facere consequatur incidunt laborum vitae earum, ducimus dignissimos eum illo.</p>
</div>
<div class="top" id="to-top"> <a href="#0">Top ⬆️</a></div>
<script>
(function() {
let lastScrollY = 0;
const onScroll = () => {
const nav = document.querySelector('#nav');
const toTop = document.querySelector('#to-top');
const standard = 30;
if(window.scrollY > standard) { // 스크롤이 30px을 넘었을 때 1)
nav.classList.add('shadow');
toTop.classList.add('show');
} else { // 스크롤이 30px을 넘지 않을 때
nav.classList.remove('shadow');
toTop.classList.remove('show');
}
if(window.scrollY > lastScrollY) { // 스크롤 방향이 아랫쪽 일 때 2)
nav.classList.add('lift-up')
toTop.classList.add('show-right')
} else { // 스크롤 방향이 윗쪽 일 때
nav.classList.remove('lift-up')
toTop.classList.remove('show-right')
}
lastScrollY = window.scrollY; // scrollY프로퍼티 값을 lastScrollY변수에 담게 되니깐 2)의 조건식을 활용해서 스크롤 방향을 아랫쪽으로, 윗쪽으로 했는지 감지 할수 있게 된다.
}
window.addEventListener('scroll', onScroll);
})();
</script>
</body>
</html>
🎯 스크롤 방향 감지하기 설명
lastScrollY = window.scrollY; 를 활용해서 스크롤의 방향을 감지할 수 있습니다.
스크롤 이벤트를 이런식으로 활용할 수 있으니깐 참고하면 좋을 것 같습니다.
천천히 스크롤을 내려갔다 올려보시면 결과를 확인할수 있습니다.
ScrollDetection.zip
0.01MB
👉삼항연산자로 다시 작성 해봤습니다.
<script>
(function () {
let lastScrollY = 0;
const onScroll = (e) => {
const nav = document.querySelector("#nav");
const toTop = document.querySelector("#to-top");
const standard = 30;
window.scrollY > standard
? (nav.classList.add("shadow"), toTop.classList.add("show"))
: (nav.classList.remove("shadow"),
toTop.classList.remove("show"));
lastScrollY < 0 && nav.removeClass("on"); // 브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지(모바일)
window.scrollY > lastScrollY
? (nav.classList.add("lift-up"),
toTop.classList.add("show-right"))
: (nav.classList.remove("lift-up"),
toTop.classList.remove("show-right"));
lastScrollY = e.currentTarget.scrollY;
};
window.addEventListener("scroll", onScroll);
})();
</script>
