[WIP] A React component for scrolling horizontally with the mouse wheel.
http://hew.github.io/react-scroll-horizontal
Feed <HorizontalScroll>
one child, or many children.
So long as they have a static width, this component will
take care of the rest.
npm i react-scroll-horizontal
<HorizontalScroll
pageLock = { bool }
reverseScroll = { bool }
style = { object }
config = {{ stiffness: int, damping: 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 Motion
Gotchas
- Uses Flexbox
- Child item(s) must be px/em/vw - no percentages (yet)
import React, { Component } from 'react'
import HorizontalScroll from 'react-horizontal-scroll'
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>
)
}
}
import React, { Component } from 'react'
import HorizontalScroll from 'react-horizontal-scroll'
class ScrollingHorizontally extends Component {
render() {
const child = { width: `300em`, height: `100%`}
return (
<body>
<HorizontalScroll>
<div style={child} />
</HorizontalScroll>
</body>
)
}
}
Yes, please!
MIT License