Scroll Box

Split screen 내부 스크롤 위치를 keyName 기준으로 저장하고 복원합니다.

기본 사용

FlexLayoutSplitScreenScrollBox는 mount 시 저장된 위치로 scrollLeft/scrollTop을 복원하고, scroll 이벤트를 throttle하여 store에 저장합니다.

tsx

"use client";

import { FlexLayoutSplitScreenScrollBox } from "@byeolnaerim/flex-layout";

export default function CustomerList() {
  return (
    <FlexLayoutSplitScreenScrollBox
      keyName="customer-list"
      direction="y"
      style={{ height: 240, overflowY: "auto" }}
    >
      {Array.from({ length: 40 }, (_, index) => (
        <div key={index} style={{ padding: 12 }}>
          Customer {index + 1}
        </div>
      ))}
    </FlexLayoutSplitScreenScrollBox>
  );
}

상태 수명과 확인 방법

높이가 제한되어야 박스 내부에서 스크롤됩니다. 각 박스에는 서로 다른 keyName을 사용합니다. 현재 구현은 70ms throttle로 위치를 저장하고, unmount 또는 keyName 변경 시 이전 키를 삭제합니다. 따라서 탭을 숨겨 mount를 유지하는 경우와 컴포넌트를 제거하는 경우는 다르며, 새로고침 후 복원을 보장하지 않습니다.

가로 wheel scroll

direction="x"를 주면 hover 중 wheel deltaY를 가로 scrollLeft로 변환합니다.

props

keyName

스크롤 위치를 저장/복원할 key입니다.

direction

x 또는 y입니다. x는 wheel을 가로 스크롤로 처리합니다.

listScrollClassName

사용자 스크롤 스타일 클래스입니다. 지정하면 direction 기반 list-scroll 대신 default-scroll 클래스와 결합됩니다.

className

외부 스타일 클래스입니다. 기본 스타일과 함께 합쳐집니다.