Star 历史趋势
数据来源: GitHub API · 生成自 Stargazers.cn
README.md
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-scrollyarn add react-indiana-drag-scrollUsage
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 | |
| draggingClassName | String | The classname for the container during dragging | |
| 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 |
| buttons | Array | The list of mouse button numbers that will activate the scroll by drag | [0] |
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