Reactjs를 사용하여 스크롤 위치 가져오기

Reactjs를 사용하여 스크롤 위치 가져오기

reactjs를 사용하여 스크롤을 처리하고 싶다.click이벤트입니다.

먼저, 저는 다음 게시물 목록을 작성했습니다.componentDidMount.

둘째, byclick event리스트내의 각 투고에는, 투고 상세가 표시되고, 톱까지 스크롤 됩니다(투고 상세를 페이지의 톱 위치에 배치하고 있기 때문입니다).

셋째,"close button"게시물에 대한 자세한 내용은 이전 게시물 목록을 반환하지만 클릭된 게시물의 위치까지 정확히 웹 사이트를 스크롤합니다.

사용법은 다음과 같습니다.

이벤트를 클릭하여 게시 세부 정보를 봅니다.

inSingle = (post, e) => {
   this.setState({
        post: post,
        theposition: //How to get it here?
   });
   window.scrollTo(0, 0);
}

의 상태를 알고 싶다.theposition그러면 클릭된 게시물의 위치까지 정확히 스크롤할 수 있습니다.'Close event'.

스크롤 위치를 추적해야 하는 경우 리액트 훅을 사용하여 언제든지 스크롤 위치를 확인할 수 있습니다.

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

...
// inside component:

const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = () => {
    const position = window.pageYOffset;
    setScrollPosition(position);
};

useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
        window.removeEventListener('scroll', handleScroll);
    };
}, []);

이 경우useEffect와 유사한 행동을 하다componentDidMount컴포넌트가 렌더링되면 모든 렌더링에서 실행됩니다.Jared Beach가 코멘트한 것처럼 "window.addEventListener는 동일한 파라미터로 후속 콜을 폐기할 수 있을 정도로 스마트합니다.".클리어 기능을 반환하는 것을 확인합니다.componentWillUnmount.

다른 js 프레임워크나 라이브러리에서 사용하는 것처럼 이벤트청취자를 반응으로 사용할 수 있습니다.

componentDidMount() {
  window.addEventListener('scroll', this.listenToScroll)
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.listenToScroll)
}

listenToScroll = () => {
  const winScroll =
    document.body.scrollTop || document.documentElement.scrollTop

  const height =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight

  const scrolled = winScroll / height

  this.setState({
    theposition: scrolled,
  })
}

이 조작은 유효합니다.

this.setState({
    post: post,
    theposition: window.pageYOffset
});

import React, { useLayoutEffect, useState } from 'react';

export default function useWindowPosition() {
  const [scrollPosition, setPosition] = useState(0);
  useLayoutEffect(() => {
    function updatePosition() {
      setPosition(window.pageYOffset);
    }
    window.addEventListener('scroll', updatePosition);
    updatePosition();
    return () => window.removeEventListener('scroll', updatePosition);
  }, []);
  return scrollPosition;
}

다른 답변들을 종합하면, 이것이 바로 여기에 필요한 것입니다.이 후크를 사용하여 창에서 스크롤 X(수평) 및 스크롤 Y(수직) 위치를 가져옵니다.사용자가 스크롤하면 업데이트됩니다.

/// in useWindowScrollPositions.js

import { useEffect, useState } from 'react'

export const useWindowScrollPositions = () => {

   const [scrollPosition, setPosition] = useState({ scrollX: 0, scrollY: 0 })

   useEffect(() => {
    function updatePosition() {
        setPosition({ scrollX: window.scrollX, scrollY: window.scrollY })
    }

    window.addEventListener('scroll', updatePosition)
    updatePosition()

    return () => window.removeEventListener('scroll', updatePosition)
   }, [])

   return scrollPosition
}

다음으로 기능 컴포넌트의 후크를 호출합니다.

/// in MyComponent.jsx

import { useWindowScrollPositions } from 'path/to/useWindowScrollPositions'

export const MyComponent = () => {
   const { scrollX, scrollY } = useWindowScrollPositions()
   
   return <div>Scroll position is ({scrollX}, {scrollY})</div>
} 

주의:window.pageXOffset그리고.window.pageYOffset몇 년 전부터 다른 답변에 사용되었던, 는 에 유리하게 폐지되어 왔다.window.scrollX그리고.window.scrollY

네이티브 리액트이벤트 리스너를 사용할 수 있습니다.

<div onScroll={(e) => console.log("scrolling!", e.target.scrollTop)}>
    <h3>Some huge div</h3>
</div>

다음과 같이 합니다.

theposition: e.y // or, e.pageY

아니면...

theposition: e.clientY - e.currentTarget.getBoundingClientRect().top

사용할 수 있는 현재 스크롤 위치를 가져옵니다.

수평 스크롤 양 창.pageXOffset

수직 스크롤 양 window.page세트

이 레포는 나에게 많은 도움을 주었다. https://github.com/n8tb1t/use-scroll-position

yarn add @n8tb1t/use-scroll-position

import { useScrollPosition } from '@n8tb1t/use-scroll-position'


useScrollPosition(({ prevPos, currPos }) => {
 console.log(currPos.x)
 console.log(currPos.y)
})

MDN에서 찾은 내용:

element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight

window.page 대신 window.scrollY를 사용합니다.YOffset(사용되지 않음).

  const [scrollPosition, setScrollPosition] = useState(0);
  
  useEffect(() => {
    if (typeof window !== "undefined") {
      
      const handleScroll = () => {
        const position = window.scrollY;
        setScrollPosition(position);
      }

      window.addEventListener("scroll", handleScroll);
   
      return () => window.removeEventListener("scroll", handleScroll);
    }
  }, [])

언급URL : https://stackoverflow.com/questions/53158796/get-scroll-position-with-reactjs