반응: 스크롤할 때 요소 숨기기

최근에 저는 제 React 앱(포트폴리오 사이트)에서 페이지를 아래로 스크롤할 때 요소를 숨기는(또는 표시하는) 방법을 찾고 있었습니다. 예, 작업에 따라 트릭을 수행할 수 있는 추가할 수 있는 몇 가지 React 구성 요소가 있지만(React-Headroom 참조) 이 가이드는 React 구성 요소에서 이 기능을 활성화하는 방법에 대한 요약을 제공하기 위한 것입니다. 자신을 위해. 아래 예(소셜 미디어 아이콘이 나타났다가 사라짐)를 간단히 살펴본 후 본론으로 들어가겠습니다.


kyleluke.dev의 예

설정 상태

state = {
    opacity: '1'
}

먼저 상태를 기능에 원하는 기본 값으로 설정해야 합니다. 이 기능의 상태는 변경하려는 css 값입니다. 나타나기를 원하십니까 아니면 사라지기를 원하십니까(상태를 어디서 시작하시겠습니까)? 슬라이드 인/아웃(위쪽, 오른쪽, 아래쪽 또는 왼쪽 위치) 또는 페이드 인/아웃(불투명도)을 원하십니까?

여기에서 보고 싶은 전환과 페이지를 스크롤하는 동안 해당 전환의 타이밍을 기반으로 상태를 조정할 수 있습니다.

전환 타이밍

componentDidMount() {
    if (typeof window !== "undefined") {
      window.onscroll = () => {
        let currentScrollPos = window.pageYOffset;
        let maxScroll = document.body.scrollHeight - window.innerHeight;
        // console.log(maxScroll)
        if (currentScrollPos > 0 && currentScrollPos < maxScroll) {
          this.setState({ opacity: "0" })
          // console.log(currentScrollPos)
        } else {
          this.setState({ opacity: "1" })
        }
      }
    }
  }

구성 요소가 마운트되면 onscroll 이벤트에 대한 창을 보기 시작합니다. 먼저 currentScrollPos 변수를 만든 다음 상태를 변경하기 위해 원하는 스크롤 위치로 작업합니다.

이 예제는 스크롤 위치 0(페이지 상단)과 사용자가 페이지 하단으로 스크롤할 때의 스크롤 위치 또는 해당 maxScroll 위치(총 스크롤 높이 - 창 높이 = 사용자가 스크롤한 위치)를 감시하도록 설정되었습니다. 최대한 아래로).

이 부분은 전환이 발생하기 위해 원하는 스크롤 위치가 어디인지 계산해야 하므로 가장 까다로울 수 있습니다. 몸 높이 전체를 스크롤할 수 없으므로 몸 높이와 함께 창 높이를 생각하십시오. 자신의 구성 요소 문제를 해결하는 동안 볼 수 있는 예제 console.log() 변수를 찾을 수 있습니다.

전환을 위한 상태 업데이트

if (currentScrollPos > 0 && currentScrollPos < maxScroll) {
        this.setState({ opacity: "0" })
    } 
else {
        this.setState({ opacity: "1" })
    }

전환을 수행하는 것은 상태를 업데이트하는 것만큼 쉽습니다. 불투명도를 변경하도록 설정하거나 위치를 -5rem에서 0으로(또는 그 반대로) 이동할 수 있습니다. 여기에서 다양한 CSS 속성과 값을 수정하여 원하는 전환을 수행할 수 있습니다.

요소 선언

render() {
    return (
        <div className="your-class" style={{ opacity: `${this.state.opacity}`}} >
        {/* additonal content */}
        </div>
    )
}

여기에서 작업 중인 구성 요소 내의 반환 값에 요소를 선언합니다. 여기에서 전환하는 스타일을 조정할 수 있습니다. 이 경우에는 불투명도로 작업합니다. 이 기술을 사용하여 여러 스타일을 전환할 수 있습니다.

도움이 될 수 있는 추가 CSS

.your-class {
    z-index:200;
    position: fixed;
    bottom:0;  // this can be used to transition a sliding effect. Try -5rem in initial state
    transition: opacity .1s ease;  // this allows for a smooth transition effect
}

여기의 스타일은 선택한 사례에 대해 매우 전문화되어 있지만 전환에 대한 보완책으로 생각할 수 있는 몇 가지 아이디어를 포함하고 싶었습니다. 특히 CSS 속성: transition. 훨씬 보기 좋은 방식으로 전환을 수행할 수 있는 많은 기능이 있습니다.

전체 구성 요소

import React, { Component } from 'react';

class Index extends Component {
  state = {
    opacity: '1'
  }

  componentDidMount() {
    if (typeof window !== "undefined") {
      window.onscroll = () => {
        let currentScrollPos = window.pageYOffset;
        let maxScroll = document.body.scrollHeight - window.innerHeight;
        // console.log(maxScroll)
        if (currentScrollPos > 0 && currentScrollPos < maxScroll) {
          this.setState({ opacity: "0" })
          // console.log(currentScrollPos)
        } else {
          this.setState({ opacity: "1" })
        }
      }
    }
  }

  render() {
    return (
        <div className="your-class" style={{ opacity: `${this.state.opacity}`}} >
         {/* additonal content */} Hello World
        </div>
    )
  }
}

export default Index

다음은 모든 단계가 결합된 완전한 구성 요소입니다. 앱의 특정 확대/축소 위치에서 요소를 숨기거나 표시하는 데 필요한 단계를 시각화하는 데 도움이 되기를 바랍니다.

이 정보가 유용하다고 생각하고 자신의 앱에서 개선한 사항이 있으면 댓글을 남겨주세요!