Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/noeldelgado/react-gemini-scrollbar
:last_quarter_moon: React component for custom overlay-scrollbars with native scrolling mechanism.
https://github.com/noeldelgado/react-gemini-scrollbar
custom-scrollbar custom-scrollbars gemini-scrollbar react reactjs scrollbar
Last synced: 5 days ago
JSON representation
:last_quarter_moon: React component for custom overlay-scrollbars with native scrolling mechanism.
- Host: GitHub
- URL: https://github.com/noeldelgado/react-gemini-scrollbar
- Owner: noeldelgado
- License: mit
- Created: 2015-03-25T04:04:43.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-10-03T04:52:39.000Z (over 6 years ago)
- Last Synced: 2025-01-07T14:10:01.257Z (12 days ago)
- Topics: custom-scrollbar, custom-scrollbars, gemini-scrollbar, react, reactjs, scrollbar
- Language: JavaScript
- Homepage:
- Size: 56.6 KB
- Stars: 134
- Watchers: 5
- Forks: 24
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-gemini-scrollbar - React component for custom overlay-scrollbars with native scrolling mechanism. (Uncategorized / Uncategorized)
- awesome-list - react-gemini-scrollbar - React component for custom overlay-scrollbars with native scrolling mechanism. (Demos / Custom Scrollbar)
README
# react-gemini-scrollbar
[](https://www.npmjs.com/package/react-gemini-scrollbar)
[](https://snyk.io/test/npm/react-gemini-scrollbar/2.3.4)
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][1] under the hood, check the gemini-scrollbar [repo][1] for more information.*
## Install
**NPM**
```sh
npm install react-gemini-scrollbar --save
```
## Usage
**JSX**
```js
var GeminiScrollbar = require('react-gemini-scrollbar');
The content.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
**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
```
## Props
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:
```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 {...}
```
## Related
- [gemini-scrollbar](https://github.com/noeldelgado/gemini-scrollbar) - Vanilla JS version
## License
MIT © [Noel Delgado][0]
[0]: http://pixelia.me/
[1]: https://github.com/noeldelgado/gemini-scrollbar