버튼 클릭 시 현재 스크롤이 있는 위치에 모달 창을 띄우는 방법

Question

구현하고자하는 기능은 버튼을 클릭 했을 때 현재 스크롤이 위치한 화면에 정가운데 모달창을 띄우려는 기능을

구현하려고 합니다.

현재는 버튼 클릭 시 최상단에 모달창이 출력되기에 스크롤이 최상단으로 위치하게 만들어 모달창이 보이도록하였습니다.

문제는 하단에서 리스트를 수정폼을 클릭 했을 경우 화면이 최상단으로 위치하기에 모달창을 닫고 다시 아래로 스크롤을 내려야하는

불편함이 생깁니다.

javascript를 사용해서 현재 스크롤y값을 가져오는것까지 해보았는데 스크롤기준값으로 했을 경우 모달 위치를 정확하게 잡을수가 없는 상황입니다.

제가 구현하려는 기능에 대해 팁을 얻고자 글을 올렸습니다.

선배님들의 가르침 부탁드립니다.

const [scrollPostion, setScrollPosition] = useState(50);

    useEffect(() => {
      let currentPosition =
        (window.scrollY /
          (document.documentElement.scrollHeight - window.innerHeight)) *
        100;

      if (currentPosition === 0) {
        currentPosition = 50;
      }
      console.log(currentPosition);
      setScrollPosition(currentPosition);
    }, []);

    const testCss = {
      ttt: `absolute z-30 top-[${scrollPostion}%] left-1/2 translate-x-[-50%] translate-y-[-50%]`,
    };

return (
      modal.isOpen && (
        <>
          
          
            {modal.component}
          
        
      )
    );

codezzzz · Accepted Answer

absolute 말고 fixed쓰면 되는거 아닐까요!?

킁킁탐정 · Answer

가볍고 정확하며 검증된 다음의 라이브러리를 이용하세요.

https://floating-ui.com/

버튼 클릭 시 현재 스크롤이 있는 위치에 모달 창을 띄우는 방법

2개의 답변

Q&A 목록