스크롤 방향 감지하기

소윤호·2021년 5월 27일
1
post-thumbnail

스크롤 방향 감지하기

안녕하세요 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; 를 활용해서 스크롤의 방향을 감지할 수 있습니다.
스크롤 이벤트를 이런식으로 활용할 수 있으니깐 참고하면 좋을 것 같습니다.

천천히 스크롤을 내려갔다 올려보시면 결과를 확인할수 있습니다.

위에 글은 개인 블로그에도 올려놓은 글 입니다.
더 많은 컨텐츠를 보고 싶은 분들은 방문해서 구경하세요:)
TriplexLab Bolg 👍👍

profile
javascript ES6+를 사랑하는 FE개발자 입니다.

0개의 댓글