react-gemini-scrollbar
React 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 under the hood, check the gemini-scrollbar repo for more information.
Install
NPM
npm install react-gemini-scrollbar --saveUsage
JSX
var GeminiScrollbar = require('react-gemini-scrollbar');
<GeminiScrollbar>
<h1>The content.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</GeminiScrollbar>Don’t forget the gemini stylesheet
NPM@2 located at:
node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.cssNPM@3 located at:
node_modules/gemini-scrollbar/gemini-scrollbar.cssProps
| name | type | default | description |
|---|---|---|---|
| autoshow | bool | false |
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:
/* 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:
<GeminiScrollbar className='my-awesome-scrollbar'>...</GeminiScrollbar>.my-awesome-scrollbar .gm-scrollbar.-vertical {...}
.my-awesome-scrollbar .gm-scrollbar.-horizontal {...}
.my-awesome-scrollbar .gm-scrollbar .thumb {...}Related
- gemini-scrollbar - Vanilla JS version
License
MIT © Noel Delgado