React Scroll Horizontal
Scroll horizontally with the mousewheel!
npm install --save react-scroll-horizontalHow it Works
Feed <HorizontalScroll> 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 <HorizontalScroll>
Usage
npm i react-scroll-horizontal <HorizontalScroll
pageLock = { bool }
reverseScroll = { bool }
style = { object }
config = {{ stiffness: int, damping: int }}
className = { string }
animValues = { int }
>
{ children }
</HorizontalScroll>Props
pageLock- Adds alock__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 value
Gotchas
- Child item(s) must be px/em/vw - no percentages (yet)
- Flexbox weirdness in IE
Arbitrary Parent/Child Widths Example
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 (
<div style={parent}>
<HorizontalScroll>
<div style={child} />
<div style={child} />
<div style={child} />
</HorizontalScroll>
</div>
)
}
}Full Width Example
import React, { Component } from 'react'
import HorizontalScroll from 'react-scroll-horizontal'
class ScrollingHorizontally extends Component {
render() {
const child = { width: `300em`, height: `100%`}
return (
<body>
<HorizontalScroll>
<div style={child} />
</HorizontalScroll>
</body>
)
}
}Roadmap
- Normalize mouse delta values (see: #1)
- Implement tests
β¨ - Perf optimizations
- Ability to swap out animation engines (maybe)
Contributing
Want to help out? Great!
Sites/Apps using React Scroll Horizontal
MIT Β© hew