React Scroll Horizontal
Scroll horizontally with the mousewheel!
npm install --save react-scroll-horizontal
How 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 = = = = = = > 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' { const child = width: `30em` height: `100%` const parent = width: `60em` height: `100%` return <div => <HorizontalScroll> <div = /> <div = /> <div = /> </HorizontalScroll> </div> }
Full Width Example
{ 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