滚动

@cloud-ru/ds-scroll -=YTET -伊甸园字幕组=- 翻译:.

Scroll - с с скроллбарами 重叠滚动栏。 。 。 .

Когда

• Прокручиваемые:боковые也.
• {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}======================================================================================================================================== -============================================================================================== autoscrollTo='bottom'。 。 。 .
• Контейнер,размер也 resize='both' | 'horizontal' | 'vertical'。 。 。 .

Когда не использовать:

• На <body> -=YTET -伊甸园字幕组=- 翻译:.
• {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得怎样.
• ============================================ ==================================================================================================================================================================================================================.

Анатомия

大小

Толщина: s - дефолт и и; m -=ytet -伊甸园字幕组=- 翻译:.

条形隐藏策略

说得好 never - всегда; leave - при уводе; scroll - только во; move . . . . .

调整大小

调整了CSS的大小 resize数字 : none ( , horizontal, (中文(简体) ), vertical, (中文(简体) ), both。 。 。 .

自动滚动到

# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # bottom - для и; right - 。 。 。 。 .

Установка

pnpm add @cloud-ru/ds-scroll

import { Scroll } from '@cloud-ru/ds-scroll'

Примеры

Базовый

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢.

import { Scroll } from '@cloud-ru/ds-scroll';

export function Basic() {
  return (
    <div style={{ height: 200, width: 320 }}>
      <Scroll>
        <div style={{ padding: 8 }}>
          {Array.from({ length: 20 }, (_, i) => (
            <div key={i}>Строка контента {i + 1}</div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢.

import { Scroll } from '@cloud-ru/ds-scroll';

export function SmallSize() {
  return (
    <div style={{ height: 180, width: 280 }}>
      <Scroll size='s'>
        <div style={{ padding: 8 }}>
          {Array.from({ length: 15 }, (_, i) => (
            <div key={i}>Пункт {i + 1}</div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

barHideStrategy="leave" {\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}你觉得呢.

import { Scroll } from '@cloud-ru/ds-scroll';

export function HideOnLeave() {
  return (
    <div style={{ height: 200, width: 320 }}>
      <Scroll barHideStrategy='leave'>
        <div style={{ padding: 8 }}>
          {Array.from({ length: 20 }, (_, i) => (
            <div key={i}>Строка {i + 1}</div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}

Ресайзируемый

resize="both" - пользователь за угол угол угол.

import { Scroll } from '@cloud-ru/ds-scroll';

export function Resizable() {
  return (
    <div style={{ height: 200, width: 320 }}>
      <Scroll resize='both'>
        <div style={{ padding: 8 }}>
          {Array.from({ length: 20 }, (_, i) => (
            <div key={i}>Контент, который можно ресайзить — {i + 1}</div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}

Автоскрол

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我们一起来.

import { Scroll } from '@cloud-ru/ds-scroll';

export function AutoscrollBottom() {
  return (
    <div style={{ height: 200, width: 320 }}>
      <Scroll autoscrollTo='bottom'>
        <div style={{ padding: 8 }}>
          {Array.from({ length: 40 }, (_, i) => (
            <div key={i}>Сообщение {i + 1}</div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}

道具

滚动程序

相关类型

• AutoscrollTo =: "bottom" | "right"

• BarHideStrategy =: "leave" | "move" | "never" | "scroll"

• Resize =: "both" | "horizontal" | "none" | "vertical"

• Size =: "m" | "s"