Norserium / React Indiana Drag Scroll
Licence: other
React component which implements scrolling via holding the mouse button or touch
Stars: ✭ 190
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Indiana Drag Scroll
Dragscroll
micro library for drag-n-drop scrolling style
Stars: ✭ 989 (+420.53%)
Mutual labels: drag, scroll, scrolling
Moveto
A lightweight scroll animation javascript library without any dependency
Stars: ✭ 2,746 (+1345.26%)
Mutual labels: lightweight, scroll, scrolling
Scrollbooster
Enjoyable content drag-to-scroll library
Stars: ✭ 775 (+307.89%)
Mutual labels: library, drag, scroll
Prognroll
A tiny, lightweight jQuery plugin that creates scroll progress bar on the page.
Stars: ✭ 108 (-43.16%)
Mutual labels: scroll, scrolling
Uploader
A lightweight and very configurable jQuery plugin for file uploading using ajax(a sync); includes support for queues, progress tracking and drag and drop.
Stars: ✭ 1,042 (+448.42%)
Mutual labels: lightweight, drag
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-55.26%)
Mutual labels: lightweight, scroll
Android scroll endless
Scroll endless for Android recyclerview
Stars: ✭ 12 (-93.68%)
Mutual labels: scroll, scrolling
Jquery Scrolllock
Locks mouse wheel scroll inside container, preventing it from propagating to parent element
Stars: ✭ 109 (-42.63%)
Mutual labels: scroll, scrolling
Arare
Lightweight curried functional programming library
Stars: ✭ 127 (-33.16%)
Mutual labels: library, lightweight
Jeelizfacefilter
Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).
Stars: ✭ 2,042 (+974.74%)
Mutual labels: library, lightweight
Ngx Ui Scroll
Infinite/virtual scroll for Angular
Stars: ✭ 145 (-23.68%)
Mutual labels: scroll, scrolling
Horizontal Scroll
Horizontal scroll with inertia
Stars: ✭ 175 (-7.89%)
Mutual labels: scroll, scrolling
Cardviewlist
An elegant and responsive CardView like Android on iOS with Swift. Available horizontal and vertical scrolling with full animations and customizable.
Stars: ✭ 30 (-84.21%)
Mutual labels: library, scrolling
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-46.84%)
Mutual labels: scroll, scrolling
Humblelogging
HumbleLogging is a lightweight C++ logging framework. It aims to be extendible, easy to understand and as fast as possible.
Stars: ✭ 15 (-92.11%)
Mutual labels: library, lightweight
Indicators
Activity Indicators for Modern C++
Stars: ✭ 1,838 (+867.37%)
Mutual labels: library, lightweight
Scroll Snap
↯ Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour
Stars: ✭ 187 (-1.58%)
Mutual labels: scroll, scrolling
Librg
🚀 Making multi-player gamedev simpler since 2017
Stars: ✭ 813 (+327.89%)
Mutual labels: library, lightweight
Fuckmyscroll.js
🔮 Animated scrolling to certain point or anchor
Stars: ✭ 10 (-94.74%)
Mutual labels: scroll, scrolling
React Indiana Drag Scroll
Implements scroll on drag
Welcome to journey!
Try it yourself! Go to demo website.
Install
npm install --save react-indiana-drag-scroll
yarn add react-indiana-drag-scroll
Usage
import React, { Component } from 'react'
import ScrollContainer from 'react-indiana-drag-scroll'
class Example extends Component {
render () {
return (
<ScrollContainer className="scroll-container">
{ ... }
</ScrollContainer>
)
}
}
Component properties
| Prop | Type | Description | Default |
|---|---|---|---|
| vertical | Bool | Allow vertical drag scrolling | true |
| horizontal | Bool | Allow horizontal drag scrolling | true |
| hideScrollbars | Bool | Hide the scrollbars | true |
| activationDistance | Number | The distance that distinguish click and drag start | 10 |
| children | Node | The content of scrolling container | |
| onScroll | Function | Invoked when user scrolling container | |
| onEndScroll | Function | Invoked when user ends scrolling container | |
| onStartScroll | Function | Invoked when user starts scrolling container | |
| onClick | Function | Invoked when user clicks the scrolling container without dragging | |
| component | String | The component used for the root node. | 'div' |
| className | String | The custom classname for the container | |
| style | Number | The custom styles for the container | |
| innerRef | ElementType | The ref to the root node (experimental alternative to getElement) |
|
| ignoreElements | String | Selector for elements that should not trigger the scrolling behaviour (for example, ".modal, dialog" or "*[prevent-drag-scroll]") |
|
| nativeMobileScroll | Bool | Use native mobile drag scroll for mobile devices | true |
Static functions
| Name | Returns | Description |
|---|---|---|
| getElement | HTMLElement | Returns the HTML element |
FAQ
How to set the initial scroll?
To set initial scroll you need get the ref to the root node of the ScrollContainer. It can be implemented by using innerRefproperty or the static function getElement. At the worst you can use the ReactDOM.findDOMNode method.
License
The source code is licensed under MIT, all images (except hieroglyphs) are copyrighted to their respective owner © Norserium
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].