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.
NPM
npm install react-gemini-scrollbar --saveJSX
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.css NPM@3 located at:
node_modules/gemini-scrollbar/gemini-scrollbar.css | 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). |
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 {...}- gemini-scrollbar - Vanilla JS version
MIT © Noel Delgado
