noeldelgado / React Gemini Scrollbar
Licence: mit
🌗 React component for custom overlay-scrollbars with native scrolling mechanism.
Stars: ✭ 127
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Gemini Scrollbar
Transformerslayout
🔥 App金刚区导航菜单,类似淘宝、QQ音乐等APP导航,方格布局横向多行滑动翻页带滚动条
Stars: ✭ 258 (+103.15%)
Mutual labels: scrollbar
React Scrollbars Custom
The best React custom scrollbars component
Stars: ✭ 576 (+353.54%)
Mutual labels: scrollbar
React Scrollbar
The Simplest Scroll Area Component with custom scrollbar for React JS. https://bosnaufal.github.io/react-scrollbar
Stars: ✭ 61 (-51.97%)
Mutual labels: scrollbar
Quantum Nox Firefox Dark Full Theme
These usercontent and userchrome files will give a full themed dark color to Firefox Quantum, menus and dialogs included, as well as the scrollbars. You can also use the JS files to enable multirow tabs and other functions.
Stars: ✭ 328 (+158.27%)
Mutual labels: scrollbar
Materialscrollbar
An Android library that brings the Material Design 5.1 sidebar to pre-5.1 devices.
Stars: ✭ 761 (+499.21%)
Mutual labels: scrollbar
vue-custom-scrollbar
Minimalistic but perfect custom scrollbar component for Vue.JS
Stars: ✭ 95 (-25.2%)
Mutual labels: scrollbar
Toscrollbar
An interactive scroll bar for traversing comically massive scroll views.
Stars: ✭ 90 (-29.13%)
Mutual labels: scrollbar
Smooth Scrolling
smooth scrolling and parallax effects on scroll
Stars: ✭ 514 (+304.72%)
Mutual labels: scrollbar
Vim Scrollstatus
A Vim plugin to display a scrollbar in the statusline
Stars: ✭ 46 (-63.78%)
Mutual labels: scrollbar
Ngx Scrollbar
Custom overlay-scrollbars with native scrolling mechanism
Stars: ✭ 355 (+179.53%)
Mutual labels: scrollbar
Minimap.vim
📡 Blazing fast minimap / scrollbar for vim, powered by code-minimap written in Rust.
Stars: ✭ 404 (+218.11%)
Mutual labels: scrollbar
Ember Perfect Scroll
Perfect scroll component as an Ember cli addon
Stars: ✭ 21 (-83.46%)
Mutual labels: scrollbar
Fakescroll
vanilla-js lightweight custom HTML scrollbar
Stars: ✭ 309 (+143.31%)
Mutual labels: scrollbar
Firefox Overlay Scrollbar
A working prototype of custom styleable overlay scrollbars on Firefox 72+.
Stars: ✭ 74 (-41.73%)
Mutual labels: scrollbar
Newschannel
新闻频道栏/滚动栏(网易新闻,新浪新闻,搜狐新闻,今日头条,聚划算,腾讯视频,优酷等类的频道栏),支持小红点标识 && 懒加载 && 缓存 && 排序 && 增删等
Stars: ✭ 256 (+101.57%)
Mutual labels: scrollbar
Vuebar
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com
Stars: ✭ 650 (+411.81%)
Mutual labels: scrollbar
Vue Gemini Scrollbar
Custom overlay-scrollbars with native scrolling mechanism for web applications基于原生滚动机制的自定义滚动条
Stars: ✭ 99 (-22.05%)
Mutual labels: scrollbar
Vue Scroll Progress Bar
Vue.js plugin for page scroll progress bar
Stars: ✭ 76 (-40.16%)
Mutual labels: scrollbar
Vuescroll
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.
Stars: ✭ 1,016 (+700%)
Mutual labels: scrollbar
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 --save
Usage
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
[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:
<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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].