Skip to main content

Scrollbar

用于替换浏览器原生滚动条。

基础用法​

通过 height 属性设置最大高度，若不设置则根据父容器高度自适应。

function App() {
  const data = Array(24).fill('item')
  return (
    <Scrollbar height={360}>
      {data.map((item) => (
        <div key={Math.random()}>
          {item}
        </div>
      ))}
    </Scrollbar>
  )
}

横向滚动​

通过 width 属性设置最大宽度，与 height 同理。

function App() {
  const data = Array(36).fill('item')
  return (
    <Scrollbar width="100%">
      <div className="idesign-demo-itemx-wrap">
        {data.map((item) => (
          <div key={Math.random()}>
            {item}
          </div>
        ))}
      </div>
    </Scrollbar>
  )
}

滚动触发事件​

可通过 onScrollX 和 onScrollY 控制水平垂直滚动触发事件，参数均为滚动比例。

function App() {
  const data = Array(36).fill('item')
  const handleScroll = (val) => {
    console.log(val)
  }
  return (
    <>
      <Scrollbar height={360} onScrollY={handleScroll}>
        {data.map((item) => (
          <div key={Math.random()}>
            {item}
          </div>
        ))}
      </Scrollbar>
      <Scrollbar width="100%" onScrollX={handleScroll}>
        <div>
          {data.map((item) => (
            <div key={Math.random()}>
              {item}
            </div>
          ))}
        </div>
      </Scrollbar>
    </>
  )
}

API​

属性说明类型默认值
children内容ReactNode--
className类名string--
style样式CSSProperties--
width滚动容器宽度number--
height滚动容器高度number--
onScrollX水平滚动触发事件(x:number) => void--
onScrollY垂直滚动触发事件(y:number) => void--