React Scroll Horizontal

Scroll horizontally with the mousewheel!

npm install --save react-line-slider

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-line-slider

  <HorizontalScroll
    pageLock      = { bool }
    reverseScroll = { bool }
    style         = { object }
    config        = {{ stiffness: int, damping: int }}
    className     = { string }
    animValues    = { int }
    scrollToValue = { int }
    onScroll      = { func(int) }
    onReachStart  = { func }
    onReachEnd    = { func }
    >
     { children }
  </HorizontalScroll>

Props

pageLock - Adds a lock__ class to the HTML body
reverseScroll - Reverses the scroll direction
style - Pass a style object through to parent div
config - Passes a spring config object to React Motion
className - Classnames to pass into the component
animValues - Emulate scroll by passing a delta value
scrollToValue - Emulate scroll by passing an absolute value
onScroll - Callback for scroll event
onReachStart - Function to be called when scroll reaches start
onReachEnd - Function to be called when scroll reaches end

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

ieaseMusic

lockerace / react-line-slider