Scroll horizontally with the mousewheel!
npm install react-line-slider> Scroll horizontally with the mousewheel!
``bash`
npm install --save react-line-slider
Feed one child, or many children.
So long as they have a static width, this component will
take care of the rest. **Note: the width of the children must
be greater than the width of the **
___
`bash`
npm i react-line-slider
`jsx
reverseScroll = { bool }
style = { object }
config = {{ stiffness: int, damping: int }}
className = { string }
animValues = { int }
scrollToValue = { int }
onScroll = { func(int) }
onReachStart = { func }
onReachEnd = { func }
>
{ children }
`
Props
* pageLock - Adds a lock__ class to the HTML bodyreverseScroll
* - Reverses the scroll directionstyle
* - Pass a style object through to parent divconfig
* - Passes a spring config object to React MotionclassName
* - Classnames to pass into the componentanimValues
* - Emulate scroll by passing a delta valuescrollToValue
* - Emulate scroll by passing an absolute valueonScroll
* - Callback for scroll eventonReachStart
* - Function to be called when scroll reaches startonReachEnd
* - Function to be called when scroll reaches end
Gotchas
* Child item(s) must be px/em/vw - no percentages (yet)
* Flexbox weirdness in IE
jsx
import React, { Component } from 'react'
import HorizontalScroll from 'react-scroll-horizontal'class ScrollingHorizontally extends Component {
render() {
const child = { width:
30em, height: 100%}
const parent = { width: 60em, height: 100%}
return (
)
}
}
`
$3
js
import React, { Component } from 'react'
import HorizontalScroll from 'react-scroll-horizontal'class ScrollingHorizontally extends Component {
render() {
const child = { width:
300em, height: 100%}
return (
)
}
}
``* Normalize mouse delta values (see: #1)
* Implement tests ✨
* Perf optimizations
* Ability to swap out animation engines (maybe)
Want to help out? Great!
---
MIT © hew