JAVASCRIPT - 2021. 4. 3.

스크롤 방향 감지하기

👨‍💻 스크롤 방향 감지하기(마우스 스크롤 위아래)

안녕하세요 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>