autoHide 自動隱藏滾動條
autoHideTimeout
autoHideDuration
autoHeight (Boolean)自動設置滾動條的高度
autoHeightMax
utoHeightMin
thumbSize（number） 給滾動條設置一個固定的長度
thumbMinSize (number) 設置滾動條的最小寬度
renderThumbVertical: (Function)設置垂直滾動條的樣式
renderThumb=({ style, ...props })=> {//設置滾動條的樣式
const thumbStyle = {
width: '15px',
backgroundColor: '#000000',
opacity: '0.2',
borderRadius: '2',
right: '10px',
};
return (
<div
style={{ ...style, ...thumbStyle }}
{...props}/>
);
}
renderTrackVertical={this.renderTrackVertical1}
renderTrackVertical1=({ style, ...props })=> {//設置滾動條的樣式
console.log("stype==",style);
console.log({...props});
const thumbStyle = {
position: 'absolute',
right: '2px',
bottom: '2px',
left: '2px',
borderRadius: '3px',
height: '900px',
opacity: '0.2',
};
return (
<div
style={{ ...style, ...thumbStyle }}
{...props}/>
);
}
通過測試發現，renderThumbVertical renderTrackVertical同時使用會，滾動條會在左邊，renderThumbVertical沒有顯示，單獨使用renderTrackVertical也沒有作用
renderThumbHorizontal = {this.renderThumb1} 設置水平滾動條的樣式
renderThumb1=({ style, ...props })=> {//設置滾動條的樣式
const thumbStyle = {
width: '0',
};
return (
<div
style={{ ...style, ...thumbStyle }}
{...props}/>
);
}
renderView
renderView=({ style, ...props })=> {
const color = 2 * 255;
const customStyle = {
backgroundColor: `rgb(${color}, ${color}, ${color})`
};
return (
<div {...props} style={{ ...style, ...customStyle }}/>
);
}
Props
onScroll: (Function) Event handler （事件處理程序）
Signature: onScroll(event)
onScrollFrame: (Function) Runs inside the animation frame. （在動畫幀內運行）
Signature: onScroll(values)
values: (Object) Values about the current position （當前位置的值）
values.top: (Number) scrollTop progess, from 0 to 1 （scrollTop 進度條，從0到1）
values.left: (Number) scrollLeft progess, from 0 to 1 （scrollLeft 進度條，從0到1）
values.clientWidth: (Number) Width of the view （視圖寬度）
values.clientHeight: (Number) Height of the view （視野高度）
values.scrollWidth: (Number) Native scrollWidth （本機scrollWidth）
values.scrollHeight: (Number) Native scrollHeight （本機scrollHeight）
values.scrollLeft: (Number) Native scrollLeft （本機scrollLeft）
values.scrollTop: (Number) Native scrollTop （本機scrollTop）
onScrollStart (Function) Called when scrolling starts （滾動開始時調用）
onScrollStop (Function) Called when scrolling stops （滾動停止時調用）
onUpdate (Function) Called when ever the component is updated. Runs inside the animation frame （當組件更新時調用。在動畫幀內運行）
Signature: onUpdate(values)
renderView: (Function) The element your content will be rendered in （內容將在其中呈現的元素）
renderTrackHorizontal: (Function) Horizontal track element （水平跟蹤元素）
renderTrackVertical: (Function) Vertical track element （垂直跟蹤元素）
renderThumbHorizontal: (Function) Horizontal thumb element （水平拇指滑動元素）
renderThumbVertical: (Function) Vertical thumb element （垂直拇指滑動元素）
hideTracksWhenNotNeeded: (Boolean) Hide tracks (visibility: hidden) when content does not overflow container. (default: false). （隱藏痕跡(visibility: hidden)當內容不溢出容器. (default: false）
thumbSize: (Number) Set a fixed size for thumbs in px. （爲拇指滑動設置一個固定的大小，單位爲px）
thumbMinSize: (Number) Minimal thumb size in px. (default: 30) （最小拇指大小(px)。）
autoHide: (Boolean) Enable auto-hide mode (default: false) （啓用自動隱藏模式）
When true tracks will hide automatically and are only visible while scrolling. （值爲“true”，軌道將自動隱藏，只在滾動時可見）
autoHideTimeout: (Number) Hide delay in ms. (default: 1000) （在ms中隱藏延遲）
autoHideDuration: (Number) Duration for hide animation in ms. (default: 200) （在ms中隱藏動畫的持續時間。）
autoHeight: (Boolean) Enable auto-height mode. (default: false) （啓用自動調整模式）
When true container grows with content （值爲“true”，容器與內容一起增長）
autoHeightMin: (Number) Set a minimum height for auto-height mode (default: 0) （爲自動高度模式設置最小高度）
autoHeightMax: (Number) Set a maximum height for auto-height mode (default: 200) （爲自動高度模式設置最大高度）
universal: (Boolean) Enable universal rendering (default: false) （啓動普遍呈現）
Methods
scrollTop(top = 0): scroll to the top value 滾動到頂部值
scrollLeft(left = 0): scroll to the left value 滾動到左邊的值
scrollToTop(): scroll to top 滾動到頂部
scrollToBottom(): scroll to bottom 滾動到底部
scrollToLeft(): scroll to left 滾動到左邊
scrollToRight(): scroll to right 滾動到右邊
getScrollLeft(): get scrollLeft value 獲得 scrollLeft 值
getScrollTop(): get scrollTop value 獲得 scrollTop 值
getScrollWidth(): get scrollWidth value 獲得 scrollWidth 值
getScrollHeight(): get scrollHeight value 獲得 scrollHeight 值
getClientWidth(): get view client width 獲取視圖客戶端寬度
getClientHeight(): get view client height 獲取視圖客戶端高度
getValues(): get an object with values about the current position. 獲取一個當前位置的值的對象
參考文檔：
[1] https://blog.csdn.net/AS_TS/article/details/107027203
[2] https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/customization.md
[3] https://github.com/malte-wessel/react-custom-scrollbars(官方文檔地址)