代码之家 › 专栏 › 技术社区 › Justinas Jakavonis

反应自定义滚动条-如何改变水平滚动轨道的颜色?

scrollbar scroll reactjs css javascript

Justinas Jakavonis · 技术社区 · 6 年前

我用 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 是吗?

1 回复 | 直到 6 年前

Justinas Jakavonis 6 年前

补充 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

Yasin UYSAL 5 年前

你可以这样试试

<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>

推荐文章

osteopathx · 使用jquery通过HTML按钮水平滚动全景图像

6 年前

Zay · 2个div,具有响应滚动的固定图像

6 年前

miss.emenems · 仅当元素到达窗口顶部时调用函数一次

6 年前

Tobias von Falkenhayn · 如何为无休止的滚动回收视图绘制背景

6 年前

dungey_140 · jQuery根据滚动位置添加类

6 年前

Marco · 滚动时在视口中显示元素

6 年前

CoÅkun Cengiz · 在listview中显示或隐藏对象

6 年前

Albeld · Autoscroll网站始终保持相同的速度

6 年前

peace_love · 如何使表格滚动到某个位置?

6 年前

joedoesnotknow · 添加新元素时如何滚动到div底部

6 年前