pixui-custom-scrollbar

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>