Scrollbar 滚动条

export function ScrollbarBasic() {  return (    <ElScrollbar height="400px">      {Array.from({ length: 20 }, (_, i) => (        <p key={i + 1} style={itemStyle}>          {i + 1}        </p>      ))}    </ElScrollbar>  );}

export function ScrollbarHorizontal() {  return (    <ElScrollbar>      <div style={{ display: "flex", width: "fit-content" }}>        {Array.from({ length: 50 }, (_, i) => (          <p key={i + 1} style={{ ...itemStyle, flexShrink: 0, width: 100 }}>            {i + 1}          </p>        ))}      </div>    </ElScrollbar>  );}

export function ScrollbarMaxHeight() {  const [count, setCount] = useState(3);  return (    <>      <ElButton onClick={() => setCount((n) => n + 1)}>Add Item</ElButton>      <ElButton onClick={() => setCount((n) => (n > 0 ? n - 1 : 0))}>Delete Item</ElButton>      <ElScrollbar maxHeight="400px">        {Array.from({ length: count }, (_, i) => (          <p key={i + 1} style={itemStyle}>            {i + 1}          </p>        ))}      </ElScrollbar>    </>  );}

export function ScrollbarManual() {  const scrollbarRef = useRef<ScrollbarExpose>(null);  const [value, setValue] = useState(0);  const [max, setMax] = useState(0);  useEffect(() => {    const wrap = scrollbarRef.current?.wrapRef.current;    if (!wrap) return;    setMax(Math.max(0, wrap.scrollHeight - wrap.clientHeight));  }, []);  return (    <>      <ElScrollbar        ref={scrollbarRef}        height="400px"        always        onScroll={({ scrollTop }) => setValue(scrollTop)}      >        {Array.from({ length: 20 }, (_, i) => (          <p key={i + 1} style={itemStyle}>            {i + 1}          </p>        ))}      </ElScrollbar>      {max > 0 && (        <ElSlider          className={styles.slider}          value={value}          max={max}          formatTooltip={(v) => `${v} px`}          onChange={(next) => {            const v = Number(next) || 0;            setValue(v);            scrollbarRef.current?.setScrollTop(v);          }}        />      )}    </>  );}

export function ScrollbarInfinite() {  const [num, setNum] = useState(30);  const loadMore = (direction: ScrollbarDirection) => {    if (direction === "bottom") setNum((n) => n + 5);  };  return (    <ElScrollbar height="400px" distance={5} onEndReached={loadMore}>      {Array.from({ length: num }, (_, i) => (        <p key={i + 1} style={itemStyle}>          {i + 1}        </p>      ))}    </ElScrollbar>  );}