使用 react-custom-scrollbars的一属性和方法

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(官方文档地址)