Scroll horizontally with the mousewheel!
npm install --save react-scroll-horizontalFeed <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>
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
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>
)
}
}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>
)
}
}- Normalize mouse delta values (see: #1)
- Implement tests ✨
- Perf optimizations
- Ability to swap out animation engines (maybe)
Want to help out? Great!
MIT © hew
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent