发现一个简单的滚动条npm包,这可以让我们抛弃浏览器原始的丑陋滚动条
npm地址:https://www.npmjs.com/package/react-custom-scrollbars
cnpm镜像地址:https://cnpmjs.org/package/react-custom-scrollbars
gitHub上的高级用法:https://github.com/malte-wessel/react-custom-scrollbars/tree/master/docs
gitHub上API文档:https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/API.md
Scrollbars 的基本用法
使用 <Scrollbars> </Scrollbars>
将需要使用滚动条的内容包裹即可
import { Scrollbars } from 'react-custom-scrollbars';
class App extends Component {
render() {
return (
<Scrollbars style={{ width: 500, height: 300 }}>
<p>Some great content...</p>
</Scrollbars>
);
}
}
可以使用Css3的calc计算属性让浏览器计算
<Scrollbars style={{ height: 'calc(100vh - 180px)' }}>
Css3的calc计算属性参考:
https://blog.csdn.net/bomess/article/details/51285873
定制 Scrollbars
import { Scrollbars } from 'react-custom-scrollbars';
class CustomScrollbars extends Component {
render() {
return (
<Scrollbars
onScroll={this.handleScroll}
onScrollFrame={this.handleScrollFrame}
onScrollStart={this.handleScrollStart}
onScrollStop={this.handleScrollStop}
onUpdate={this.handleUpdate}
renderView={this.renderView}
renderTrackHorizontal={this.renderTrackHorizontal}
renderTrackVertical={this.renderTrackVertical}
renderThumbHorizontal={this.renderThumbHorizontal}
renderThumbVertical={this.renderThumbVertical}
autoHide
autoHideTimeout={1000}
autoHideDuration={200}
autoHeight
autoHeightMin={0}
autoHeightMax={200}
thumbMinSize={30}
universal={true}
{...this.props}>
);
}
}
API
<Scrollbars>
Props
onScroll
: (Function) Event handler (事件处理程序)- Signature:
onScroll(event)
- Signature:
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)
- Signature:
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)
- Signature:
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”,轨道将自动隐藏,只在滚动时可见)
- When
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”,容器与内容一起增长)
- When
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. 获取一个当前位置的值的对象