React div 스크롤시 Fix 하기 (Element scroll)

이전에 window에서 스크롤할 때 특정 엘레멘트가 고정이 되는 기능을 구현했습니다.

이번에는 window가 아닌 특정 div 에서 스크롤했을 때 div안의 다른 객체가 고정이 되도록 구현해 보겠습니다. 

 

사실 구현 방식은 똑같습니다. 

단지 window 와는 달리 객체의 scroll 값을 구하기 위해서는 useRef를 사용해야 합니다. 

저도 이 부분을 구현하는데 있어 많은 공부가 되었습니다. 😁

 

객체에서 고정을 시키려면 fixed 와는 달리 absolute를 사용해야 합니다. 

그리고 위치의 기준이 viewport 가 되는 fixed와 다르게 absolute는 상위 객체들 중 relative가 되는 값을 참조하여 위치가 결정됩니다. 

 

그래서 제가 생각한 방법은 2가지 입니다. 거의 같으면서도 활용성이 조금 다를 것 같아서 두 가지 방식을 모두 적용해 보도록 하겠습니다. 

 

축약한다면 다음과 같습니다.

1. 기존 처럼 클래스 하나를 붙여 위치를 컨트롤한다. 

2. scroll값을 가져와 인라인 스타일로 실시간 반영한다. (다른 css 부분을 컨트롤하기 위해 어차피 클래스를 붙이긴 할 것이다.)

---

1. 클래스 하나로만 컨트롤 하기

구조를 먼저 짜봅니다.

 

box는 위치의 기준이 될 부모이고, 실제 스크롤이 되는 녀석은 boxInner입니다.

이 boxInner의 스크롤 값을 불러와 30 이상이 된다면 ScrollActive의 상태 값이 바뀌고,

ScrollActive 상태값이 바뀌면 smallBox에게 추가 클래스가 붙습니다. 

// App.js
<div className="box"  >
    <div className={ScrollActive ? "smallBox fixed" : "smallBox"}>
        {
        ScrollActive ? 
            'I am fixed! ✨' : 
            'I will be fixed! 😁'
        }
    </div>
    <div className="boxInner">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit ducimus perferendis, fuga nobis nihil eius similique. Laboriosam fuga doloribus quibusdam cumque beatae! Quae omnis, explicabo possimus molestias nam tempore!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit ducimus perferendis, fuga nobis nihil eius similique. Laboriosam fuga doloribus quibusdam cumque beatae! Quae omnis, explicabo possimus molestias nam tempore!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit ducimus perferendis, fuga nobis nihil eius similique. Laboriosam fuga doloribus quibusdam cumque beatae! Quae omnis, explicabo possimus molestias nam tempore!
        { ... }
    </div>
</div>

// App.css
.box {
  position: relative; 
  top: 30px; 
  right: 30px; 
  width: 400px; 
  height: 400px;
  background: black;
  color: white; 
  overflow: hidden;
  margin-left: 100px;
}

.box .boxInner {
  width: 100%; 
  height: 100%; 
  overflow: hidden;
  overflow-y: auto;
  padding: 10px; 
}

.smallBox {
  position: absolute; 
  top: 50px; 
  right: 40px;
  z-index: 1;
  padding: 10px; 
  background: rgb(236, 97, 218); 
  border-radius: 6px;
  color: #fff;
  border: 1px solid rgb(183, 81, 187);
  text-align: left;
}

.smallBox.fixed {
  width: 100%; 
  top: 0;
  right: 0; 
  border-radius: 0;
  text-align: center;
}

 

SPA형태인 리액트 안에서 하나의 특정 엘리먼트를 선택하려면 useRef을 사용하면 됩니다. 

ref가 걸린 엘리먼트의 속성을 확인할 수도 있고, 내장 함수를 바로 사용할 수 있습니다. 

 

예를 들어 boxRef를 div에 연결한 뒤 콘솔로 찍어보면 해당 엘리먼트의 속성 값들을 확인해 볼 수 있습니다.

ref 정보 

import React, { useState, useEffect, useRef } from 'react'

const boxRef = useRef(null);

<div className="box">
    { ... }
    <div className="boxInner" ref={boxRef}> {/* boxRef 설정하기 */}
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit ducimus perferendis, fuga nobis nihil eius similique. Laboriosam fuga doloribus quibusdam cumque beatae! Quae omnis, explicabo possimus molestias nam tempore!
        { ... }
    </div>
</div>

 

스크롤이 생성되는 div에 boxRef값을 적용합니다. 

그리고 boxRef의 스크롤 값을 실시간으로 감시(👀) 하여 값에 따라 컨트롤을 할 수 있습니다. 

저는 ScrollActive를 하나 생성하여 컨트롤을 하겠습니다.

 

- scroll 값을 가져오기 : boxRef.current.scrollTop

- scroll 행위 여부를 판단하기 : addEventListener 

 

const [ScrollY, setScrollY] = useState(0)
    const [ScrollActive, setScrollActive] = useState(false);
    function logit() {
        setScrollY(boxRef.current.scrollTop)
        if(boxRef.current.scrollTop > 30) {  
            setScrollActive(true);
        } else {
            setScrollActive(false);
        }
    }
    useEffect(() => {
        function watchScroll() {  boxRef.current.addEventListener("scroll", logit); }
        watchScroll();
        return () => { boxRef.current.removeEventListener("scroll", logit); }; 
    })
    <div className="box">
                <div className={ScrollActive ? "smallBox fixed" : "smallBox"}>
                    {
                    ScrollActive ? 
                        'I am fixed! ✨' : 
                        'I will be fixed! 😁'
                    }
                </div>
                <div className="boxInner" ref={boxRef}> {/* boxRef 설정하기 */}
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit ducimus perferendis, fuga nobis nihil eius similique. Laboriosam fuga doloribus quibusdam cumque beatae! Quae omnis, explicabo possimus molestias nam tempore!
                    { ... }
                </div>
            </div>

---

전체 소스