Horizontal and vertical scroll bar for Semantic UI React
"react": "^16.0.0",
"react-dom": "^16.0.0",
"semantic-ui-react": "^0.87.0"
npm install --save semantic-ui-react-scrollbar
Scrollbar demo
import React from 'react';
import Scrollbar from 'semantic-ui-react-scrollbar';
class ScrollbarExample extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: '0'
};
}
changeScrollPosition = (newScrollPosition) => {
this.setState({ scrollPosition: newScrollPosition });
}
render() => {(
<Scrollbar maxScrollPosition={10} changeScrollPosition={this.changeScrollPosition} />
)};
}
See full example in demo
directory
changeScrollPosition: (newScrollPosition: number) => void,
maxScrollPosition: number
property | description |
---|---|
className | class name(s) for HTML outer div element |
orientation | Scroll bar orientation |
className: string,
orientation: 'horizontal' | 'vertical'
className: undefined,
orientation: 'horizontal'
Key | Action |
---|---|
ArrowUp | Scrolls vertical scroll bar upwards |
ArrowDown | Scrolls vertical scroll bar downwards |
ArrowLeft | Scrolls horizontal scroll bar to the left |
ArrowRight | Scrolls horizontal scroll bar to the right |
<Scrollbar className="myScrollbar" .... />
Style scroll bar in CSS:
.myScrollbar .button {
/* style buttons here */
}
.myScrollbar .track {
/* style scroll bar track here */
}
.myScrollbar .thumb {
/* style scroll bar thumb here */
}
MIT License