React-baron
react component for baron scrollbar customization support. Now jQuery-free (you dont have to have jQuery anymore).
npm i react-baron --save
example:
Baron = require('react-baron');
...
// All params are optional
render: function() {
return (
<Baron
clipperCls="clipper"
scrollerCls="scroller"
trackCls="track"
barCls="bar"
barOnCls="baron">
...Scrollable content here...
</Baron>
);
}.clipper {
overflow: hidden;
height: 100%;
}
.scroller {
overflow-y: scroll;
height: 100%;
}
/* or, for flexbox */
.clipper {
display: flex;
overflow: hidden;
height: 100%;
}
.scroller {
display: flex;
flex-direction: column;
overflow-y: scroll;
flex: 1 1 auto;
}
/* And scrollbar */
.track {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 0;
}
.baron > .track {
display: block;
}
.bar {
position: absolute;
right: 0;
width: 6px;
border-radius: 3px;
background: #ccc;
}
/* hide default chrome scrollbar */
.scroller::-webkit-scrollbar {
width: 0;
height: 0;
}API
Same as baron.js.
Plus
// Scroll as far as possible
this.refs.baron.scrollToLast()
// You must set baron ref for Baron component
// Get DOM-node scroller
this.refs.baron.getScroller();
// Get DOM-node clipper
this.refs.baron.getClipper();
// onScroll handler
onScroll: PropTypes.func;React-baron is jQuery-free (it has tiny jQuery-like utility, about 400 bytes), and its uses HTMLElement classList.
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 8+ ✔ | 3.6+ ✔ | 10+ ✔ | 11.5+ ✔ | 5.1+ ✔ | 4+ ✔ |
If you want to support IE9- (or Firefox 3.0, etc.), just set $ prop to your jQuery instance.
<Baron $={jQuery} ... />
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent