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
