zzarcon / React Scroll Shadow
Licence: mit
Pure CSS shadow to indicate more content in scrollable area
Stars: ✭ 229
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Scroll Shadow
Vue Gemini Scrollbar
Custom overlay-scrollbars with native scrolling mechanism for web applications基于原生滚动机制的自定义滚动条
Stars: ✭ 99 (-56.77%)
Mutual labels: scroll, scrollbar
react-is-scrolling
Simply detect if users are scrolling in your components in a declarative API
Stars: ✭ 17 (-92.58%)
Mutual labels: scroll, scrollbar
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (-5.68%)
Mutual labels: scroll, scrollbar
scrollpup.js
Minimal beautiful bar to show scroll progress. Pure Javascript Plugin.MIT
Stars: ✭ 83 (-63.76%)
Mutual labels: scroll, scrollbar
React Scrollbars Custom
The best React custom scrollbars component
Stars: ✭ 576 (+151.53%)
Mutual labels: scroll, scrollbar
Ngx Scrollbar
Custom overlay-scrollbars with native scrolling mechanism
Stars: ✭ 355 (+55.02%)
Mutual labels: scroll, scrollbar
react-shadow-scroll
Component that customizes the list and inserts shadow when scrolling exists
Stars: ✭ 28 (-87.77%)
Mutual labels: scroll, shadow
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 (+183.84%)
Mutual labels: scroll, scrollbar
Scrollprogress
🛸 Light weight library to observe the viewport scroll position
Stars: ✭ 148 (-35.37%)
Mutual labels: scroll, scrollbar
React Remove Scroll
Removes and disables 📜in a "React" way
Stars: ✭ 182 (-20.52%)
Mutual labels: scroll
Scroll Lock
🔨 Cross-browser JavaScript library to disable scrolling page
Stars: ✭ 199 (-13.1%)
Mutual labels: scrollbar
Scroll Js
Light cross-browser scroller that uses native javascript
Stars: ✭ 179 (-21.83%)
Mutual labels: scroll
Infinitescroll
Infinite Scroll (Endless Scrolling) for RecyclerView in Android
Stars: ✭ 183 (-20.09%)
Mutual labels: scroll
Optiscroll
Custom scrollbars for modern webapps. Supercharge the native scroll!
Stars: ✭ 201 (-12.23%)
Mutual labels: scrollbar
React Focus On
🎯 Solution for WAI ARIA compatible modal dialogs or full-screen tasks, you were looking for
Stars: ✭ 180 (-21.4%)
Mutual labels: scroll
Snappyrecyclerview
An extension to RecyclerView which will snap to child Views to the specified anchor, START, CENTER or END.
Stars: ✭ 178 (-22.27%)
Mutual labels: scroll
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (-5.24%)
Mutual labels: scroll
React Native Text Ticker
React Native Text Ticker/Marquee Component
Stars: ✭ 212 (-7.42%)
Mutual labels: scroll
Stickybits
Stickybits is a lightweight alternative to `position: sticky` polyfills 🍬
Stars: ✭ 2,220 (+869.43%)
Mutual labels: scroll
react-scroll-shadow
Pure CSS shadow to indicate more content in scrollable area
Demo 🍿
https://zzarcon.github.io/react-scroll-shadow
Install 🚀
$ yarn add react-scroll-shadow
Usage ⛏
Basic
import ScrollShadow from 'react-scroll-shadow';
<ScrollShadow>
Content
</ScrollShadow>
Custom
import ScrollShadow from 'react-scroll-shadow';
<ScrollShadow
bottomShadowColors={{
active: 'red',
inactive: 'white'
}}
topShadowColors={{
active: 'blue',
inactive: 'white'
}}
shadowSize={2}
>
Content
</ScrollShadow>
Api 📚
interface ShadowColors {
inactive: string;
active: string;
}
interface Props {
height?: string;
bottomShadowColors?: ShadowColors;
topShadowColors?: ShadowColors;
shadowSize?: number;
}
See example/ for full example.
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].