Question

我使用react-custom-scrollbars进行自定义水平滚动。

<Scrollbars ref="scrollio" 
    onScroll={this.onScroll} 
    renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
    autoHeight='true' autoHeightMax={Number.MAX_VALUE} renderTrackVertical={() => <div></div>} >

    <p>Some great content...Some great content...</p>

</Scrollbars>

css文件包含：

.thumb-horizontal {
  background-color: red;
  height: 10px !important;
}

上面的代码运行良好，我得到了带有红色拇指的滚动条，但是添加了轨道信息后，滚动条视图消失了：

renderTrackHorizontal={props => <div {...props} className="track-horizontal"/>}

并且：

.track-horizontal {
  background-color: blue;
  height: 10px !important;
}

如何在react-custom-scrollbars中设置水平滚动轨道样式？

Answer 1

添加了left和bottom属性，因为它位于右上角。

.track-horizontal {
  background-color: blue;
  width: 100%;
  left: 0px;
  bottom: 0px;
  height: 10px !important;
}

类似的问题：Adding className to track (horizontal or vertical) breaks functionality

Answer 2

您可以尝试这种方式

<Scrollbars
    autoHide
    autoHideTimeout={1000}
    autoHideDuration={200}
    renderTrackVertical={({style, ...props}) =>
        <div {...props} className={s.scrollTrackVertical} style={{...style, backgroundColor: 'blue', right: '2px', bottom: '2px', top: '2px', borderRadius: '3px', width: '5px'}}/>
    }
    renderThumbVertical={({style, ...props}) =>
        <div {...props} className={s.scrollThumbVertical} style={{...style, width: '3px', borderRadius: '4px', boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.16)', backgroundColor: '#ffffff'}}/>
    }>
</Scrollbars>

react-custom-scrollbars-如何更改水平滚动轨道的颜色？

2 个答案: