logoCreated with Sketch.

X6

ScrollBox

阅读时间约 2 分钟

自定义滚动条的容器。

import { ScrollBox } from '@antv/x6-react-components'
import '@antv/x6-react-components/es/scroll-box/style/index.css'

<ScrollBox
  containerWidth={300}
  containerHeight={200}
  contentWidth={1200}
  contentHeight={3000}
  containerStyle={{ border: '1px solid #f0f0f0' }}
  contentStyle={{
    position: 'relative',
    cursor: 'grab',
    background:
      'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',
  }}
>
  <div style={{ position: 'absolute', top: 8, left: 8 }}>Top-Left-Corner</div>
  <div style={{ position: 'absolute', top: 8, right: 8 }}>Top-Right-Corner</div>
  <div style={{ position: 'absolute', bottom: 8, left: 8 }}>Bottom-Left-Corner</div>
  <div style={{ position: 'absolute', bottom: 8, right: 8 }}>Bottom-Right-Corner</div>
</ScrollBox>

ScrollBox

参数说明类型默认值
containerClassName容器样式名string-
contentClassName内容样式名string-
containerStyle容器样式CSSProperties-
contentStyle内容样式CSSProperties-
containerWidth容器宽度number-
containerHeight容器高度number-
contentWidth内容宽度number-
contentHeight内容高度number-
scrollTop垂直滚动条的位置number0
scrollLeft水平滚动条的位置number0
dragable是否可以通过拖动内容来改变滚动条的位置booleantrue
touchable是否支持 touch 事件booleantrue
scrollbarAutoHide是否自动隐藏滚动条booleantrue
scrollbarSize滚动条大小（水平滚动条的高度、垂直滚动条的宽度）number4
miniThumbSize滚动条最小标识大小number16
keyboardScrollAmount通过键盘方向键滚动时，每次滚动的大小number40
zIndexnumber-
onVerticalScroll垂直滚动条滚动时的回调函数(scrollTop: number) => void-
onHorizontalScroll水平滚动条滚动时的回调函数(scrollLeft: number) => void-
onScrollStart滚动条开始滚动时的回调函数(scrollLeft: number, scrollTop: number) => void-
onScroll滚动条滚动时的回调函数(scrollLeft: number, scrollTop: number) => void-
onScrollEnd滚动条结束滚动时的回调函数(scrollLeft: number, scrollTop: number) => void-