React component for custom scrollbars with native scrolling
npm install react-gemini-scrollbarReact component for creating custom overlay-scrollbars with native scrolling mechanism for web applications (when needed)
Important:
- It only create the custom scrollbars (bind events, etc) when the OS does not supports “overlay-scrollbars” natively, otherwise leave the scrollbars intact
- IE9+ support
Uses [gemini-scrollbar][1] under the hood, check the gemini-scrollbar [repo][1] for more information.
NPM
``sh`
npm install react-gemini-scrollbar --save
JSX
`js
var GeminiScrollbar = require('react-gemini-scrollbar');
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
The content.
`
Don’t forget the gemini stylesheet
NPM@2 located at:
``
node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css
NPM@3 located at:
``
node_modules/gemini-scrollbar/gemini-scrollbar.css
| Show scrollbars upon hovering
forceGemini | bool | false | Force Gemini scrollbars even if native overlay-scrollbars are available. Useful for development.
onResize | func | null | Hook by which clients can be notified of resize events.
minThumbSize | number | 20 | Sets the minimum size of the thumbs (in pixels).Customization
You can change the styles of the scrollbars using CSS. Ex:
`css
/ override gemini-scrollbar default styles // vertical scrollbar track /
.gm-scrollbar.-vertical {
background-color: #f0f0f0
}
/ horizontal scrollbar track /
.gm-scrollbar.-horizontal {
background-color: transparent;
}
/ scrollbar thumb /
.gm-scrollbar .thumb {
background-color: rebeccapurple;
}
.gm-scrollbar .thumb:hover {
background-color: fuchsia;
}
`If you want to specify different scrollbar styles for your components, one
alternative is to pass a
className to the component. Then you can use that
className as a namespace when writing your css. Ex:
`js
...
``css
.my-awesome-scrollbar .gm-scrollbar.-vertical {...}
.my-awesome-scrollbar .gm-scrollbar.-horizontal {...}
.my-awesome-scrollbar .gm-scrollbar .thumb {...}
``- gemini-scrollbar - Vanilla JS version
[0]: http://pixelia.me/
[1]: https://github.com/noeldelgado/gemini-scrollbar