صندوق تمرير

يحفظ ويستعيد موضع التمرير داخل الشاشة المنقسمة بناءً على اسم المفتاح.


الاستخدام الأساسي

FlexLayoutSplitScreenScrollBoxيستعيد scrollLeft/scrollTop إلى الموضع المحفوظ عند التحميل، ويقوم بتقليل أحداث التمرير لتخزينها.

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를 유지하는 경우와 컴포넌트를 제거하는 경우는 다르며, 새로고침 후 복원을 보장하지 않습니다.

تمرير العجلة الأفقي

direction="x"إذا تم إعطاؤه، يقوم بتحويل deltaY للعجلة أثناء التمرير إلى scrollLeft الأفقي.

props

keyName

المفتاح المستخدم لحفظ موضع التمرير واستعادته.

direction

القيمة x أو y. مع x تحوّل عجلة الفأرة الحركة إلى تمرير أفقي.

listScrollClassName

فئة مخصصة لتنسيق التمرير. عند تحديدها، تُدمج مع default-scroll بدلًا من فئة list-scroll المعتمدة على direction.

className

فئة تنسيق خارجية تُدمج مع التنسيقات المضمنة.

© 2026 بيولناريم. جميع الحقوق محفوظة.مقدمةسياسة معالجة المعلومات الشخصية