Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

react-scroll-horizontal

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scroll-horizontal

Scroll horizontally with the mousewheel!

1.6.4
Source
npm

Version published: 5 years ago

Weekly downloads: 935; decreased by-11.04%

Maintainers: 1

Weekly downloads

Created: 9 years ago

Source

React Scroll Horizontal

Scroll horizontally with the mousewheel!

demo

✅ Best viewed in Safari.

🚫Latest Chrome scroll behaviour looks to have broken demo.

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
    pageLock      = { bool }
    reverseScroll = { bool }
    style         = { object }
    config        = {{ stiffness: int, damping: int }}
    className     = { string }
    animValues    = { int }
    >
     { 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

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

MIT © hew

FAQs

What is react-scroll-horizontal?

Is react-scroll-horizontal popular?

Is react-scroll-horizontal well maintained?

Package last updated on 03 Mar 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install