0.2.0 • Published 3 months ago
pixui-custom-scrollbar v0.2.0
PixUI 自定义滑块使用说明
组件仅供pixui项目使用,作用是创建一个自定义滚动条。
- 引入项目
- 在代码中加入
<CustomScrollBar style={{width:'50px' , height:'500px', right:0}} //滑动条样式
blockStyle={{width:'80px' , height:'20px'}} //滑块样式
scrollWindowRef={myElementRef} //滑动窗口ref
sFrameImgNormal={frameImgNormal} //滑动条背景
sFrameImgClick={frameImgNormal} //点击或拖动时滑动条背景
sBlockImgNormal={blockImgNormal} //滑块背景
sBlockImgClick={blockImgClick} //点击或拖动时滑块背景
/>
样式用户自己通过 style 设置就行,层级无特别要求。注意要给滚动内容设一个 ref 并传给 scrollWindowRef 即可。
使用示例
<div style={{ height: '500px', width:'200px', top:'120px', left:'50px', border:'solid 2px red'}}>
<CustomScrollBar style={{width:'50px' , height:'500px', right:0}}
blockStyle={{left:'20px', width:'80px' , height:'20px', border:'solid 2px blue'}}
scrollWindowRef={myElementRef}
sFrameImgNormal={frameImgNormal}
sFrameImgClick={frameImgClick}
sBlockImgNormal={blockImgNormal}
sBlockImgClick={blockImgClick}
/>
<div id="scrollContent" ref={myElementRef} className={styles.hideScrollbar} style={{border:'solid 2px red', height: '100px', width:'100px', overflow: 'scroll' , background:'green', display: 'flex', flexDirection: 'column' }}>
<div style={{ height: '100px', width:'100px'}}>Item 1</div>
<div style={{ height: '100px', width:'100px'}}>Item 2</div>
<div style={{ height: '100px', width:'100px'}}>Item 3</div>
<div style={{ height: '100px', width:'100px'}}>Item 4</div>
</div>