Need help with react-gemini-scrollbar?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

noeldelgado
130 Stars 24 Forks MIT License 78 Commits 8 Opened issues

Description

:last_quarter_moon: React component for custom overlay-scrollbars with native scrolling mechanism.

Services available

!
?

Need anything else?

Contributors list

# 149,284
JavaScr...
CSS
Shell
scrollb...
42 commits
# 549,057
JavaScr...
React
Shell
reactjs
3 commits
# 112,957
HTML
materia...
Angular
vscode
2 commits
# 19,302
Perl
python3
s3
React
2 commits
# 29,248
CSS
React
reactjs
custom-...
2 commits
# 37,682
HTML
ESLint
ecmascr...
React
1 commit
# 130,764
GitHub
Python
React
reactjs
1 commit
# 46,840
OCaml
Shell
TypeScr...
reactjs
1 commit
# 21,938
React
Electro...
TypeScr...
css-in-...
1 commit
# 27,804
React
React N...
Objecti...
PHP
1 commit

react-gemini-scrollbar

npm-image Known Vulnerabilities license-image

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 --save

Usage

JSX

var GeminiScrollbar = require('react-gemini-scrollbar');


    

The content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Don’t forget the gemini stylesheet

[email protected] located at:

node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css

[email protected] 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:

/* 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
...
.my-awesome-scrollbar .gm-scrollbar.-vertical {...}
.my-awesome-scrollbar .gm-scrollbar.-horizontal {...}
.my-awesome-scrollbar .gm-scrollbar .thumb {...}

Related

License

MIT © Noel Delgado

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.