react-scroll-all
Install
npm install --save react-scroll-allUsage
import * as React from 'react'
import Wrapper from 'react-scroll-all'
class Example extends React.Component {
render() {
return (
<Wrapper>
<Wrapper.Column className="column">
<div style={{ height: '1000px', backgroundColor: 'red' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Facilisi nullam vehicula ipsum a arcu
cursus vitae congue mauris. Duis at consectetur lorem donec massa sapien faucibus et
molestie. Vestibulum sed arcu non odio euismod lacinia at. Eget egestas purus viverra
accumsan in nisl nisi scelerisque eu. Augue interdum velit euismod in. Quam quisque id
diam vel quam elementum pulvinar. Sit amet porttitor eget dolor morbi. Integer eget
aliquet nibh praesent tristique magna sit. Pretium quam vulputate dignissim suspendisse
in est. Tempor orci dapibus ultrices in iaculis. Non blandit massa enim nec dui.
Faucibus ornare suspendisse sed nisi. Nibh sit amet commodo nulla facilisi. Volutpat
diam ut venenatis tellus in metus. Dolor magna eget est lorem ipsum dolor sit. Velit
dignissim sodales ut eu. Amet cursus sit amet dictum sit amet justo donec. Fringilla ut
morbi tincidunt augue interdum velit euismod in. Interdum posuere lorem ipsum dolor sit
amet. Consequat semper viverra nam libero justo laoreet sit. Justo eget magna fermentum
iaculis eu non diam phasellus vestibulum. Dui sapien eget mi proin sed libero. Mauris
pellentesque pulvinar pellentesque habitant morbi tristique. Ultricies lacus sed turpis
tincidunt. Elit pellentesque habitant morbi tristique. Commodo viverra maecenas accumsan
lacus vel. Quisque non tellus orci ac. Tortor pretium viverra suspendisse potenti nullam
ac tortor vitae purus. In eu mi bibendum neque egestas congue quisque. Nibh venenatis
cras sed felis eget velit aliquet sagittis id. Sit amet nulla facilisi morbi tempus
iaculis. Id porta nibh venenatis cras sed felis eget. Erat nam at lectus urna duis
convallis. Erat nam at lectus urna duis convallis convallis tellus id. Facilisi morbi
tempus iaculis urna id volutpat lacus laoreet. Consequat nisl vel pretium lectus quam id
leo. Facilisis mauris sit amet massa vitae tortor. Euismod lacinia at quis risus sed
vulputate odio ut. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere
lorem. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Quis ipsum
suspendisse ultrices gravida dictum fusce ut placerat orci. Tempor orci dapibus ultrices
in iaculis nunc sed augue. Aliquam ut porttitor leo a. At erat pellentesque adipiscing
commodo elit at imperdiet dui accumsan. Feugiat sed lectus vestibulum mattis ullamcorper
velit. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius.
Suscipit tellus mauris a diam maecenas sed enim ut sem. Quam vulputate dignissim
suspendisse in est ante in nibh. Enim nulla aliquet porttitor lacus.
</div>
</Wrapper.Column>
<Wrapper.Column className="column">
<div style={{ height: '1000px', width: '2000px', backgroundColor: 'blue' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Facilisi nullam vehicula ipsum a arcu
cursus vitae congue mauris. Duis at consectetur lorem donec massa sapien faucibus et
molestie. Vestibulum sed arcu non odio euismod lacinia at. Eget egestas purus viverra
accumsan in nisl nisi scelerisque eu. Augue interdum velit euismod in. Quam quisque id
diam vel quam elementum pulvinar. Sit amet porttitor eget dolor morbi. Integer eget
aliquet nibh praesent tristique magna sit. Pretium quam vulputate dignissim suspendisse
in est. Tempor orci dapibus ultrices in iaculis. Non blandit massa enim nec dui.
Faucibus ornare suspendisse sed nisi. Nibh sit amet commodo nulla facilisi. Volutpat
diam ut venenatis tellus in metus. Dolor magna eget est lorem ipsum dolor sit. Velit
dignissim sodales ut eu. Amet cursus sit amet dictum sit amet justo donec. Fringilla ut
morbi tincidunt augue interdum velit euismod in. Interdum posuere lorem ipsum dolor sit
amet. Consequat semper viverra nam libero justo laoreet sit. Justo eget magna fermentum
iaculis eu non diam phasellus vestibulum. Dui sapien eget mi proin sed libero. Mauris
pellentesque pulvinar pellentesque habitant morbi tristique. Ultricies lacus sed turpis
tincidunt. Elit pellentesque habitant morbi tristique. Commodo viverra maecenas accumsan
lacus vel. Quisque non tellus orci ac. Tortor pretium viverra suspendisse potenti nullam
ac tortor vitae purus. In eu mi bibendum neque egestas congue quisque. Nibh venenatis
cras sed felis eget velit aliquet sagittis id. Sit amet nulla facilisi morbi tempus
iaculis. Id porta nibh venenatis cras sed felis eget. Erat nam at lectus urna duis
convallis. Erat nam at lectus urna duis convallis convallis tellus id. Facilisi morbi
tempus iaculis urna id volutpat lacus laoreet. Consequat nisl vel pretium lectus quam id
leo. Facilisis mauris sit amet massa vitae tortor. Euismod lacinia at quis risus sed
vulputate odio ut. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere
lorem. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Quis ipsum
suspendisse ultrices gravida dictum fusce ut placerat orci. Tempor orci dapibus ultrices
in iaculis nunc sed augue. Aliquam ut porttitor leo a. At erat pellentesque adipiscing
commodo elit at imperdiet dui accumsan. Feugiat sed lectus vestibulum mattis ullamcorper
velit. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius.
Suscipit tellus mauris a diam maecenas sed enim ut sem. Quam vulputate dignissim
suspendisse in est ante in nibh. Enim nulla aliquet porttitor lacus.Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris.
Duis at consectetur lorem donec massa sapien faucibus et molestie. Vestibulum sed arcu
non odio euismod lacinia at. Eget egestas purus viverra accumsan in nisl nisi
scelerisque eu. Augue interdum velit euismod in. Quam quisque id diam vel quam elementum
pulvinar. Sit amet porttitor eget dolor morbi. Integer eget aliquet nibh praesent
tristique magna sit. Pretium quam vulputate dignissim suspendisse in est. Tempor orci
dapibus ultrices in iaculis. Non blandit massa enim nec dui. Faucibus ornare suspendisse
sed nisi. Nibh sit amet commodo nulla facilisi. Volutpat diam ut venenatis tellus in
metus. Dolor magna eget est lorem ipsum dolor sit. Velit dignissim sodales ut eu. Amet
cursus sit amet dictum sit amet justo donec. Fringilla ut morbi tincidunt augue interdum
velit euismod in. Interdum posuere lorem ipsum dolor sit amet. Consequat semper viverra
nam libero justo laoreet sit. Justo eget magna fermentum iaculis eu non diam phasellus
vestibulum. Dui sapien eget mi proin sed libero. Mauris pellentesque pulvinar
pellentesque habitant morbi tristique. Ultricies lacus sed turpis tincidunt. Elit
pellentesque habitant morbi tristique. Commodo viverra maecenas accumsan lacus vel.
Quisque non tellus orci ac. Tortor pretium viverra suspendisse potenti nullam ac tortor
vitae purus. In eu mi bibendum neque egestas congue quisque. Nibh venenatis cras sed
felis eget velit aliquet sagittis id. Sit amet nulla facilisi morbi tempus iaculis. Id
porta nibh venenatis cras sed felis eget. Erat nam at lectus urna duis convallis. Erat
nam at lectus urna duis convallis convallis tellus id. Facilisi morbi tempus iaculis
urna id volutpat lacus laoreet. Consequat nisl vel pretium lectus quam id leo. Facilisis
mauris sit amet massa vitae tortor. Euismod lacinia at quis risus sed vulputate odio ut.
Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Nunc lobortis
mattis aliquam faucibus purus in massa tempor nec. Quis ipsum suspendisse ultrices
gravida dictum fusce ut placerat orci. Tempor orci dapibus ultrices in iaculis nunc sed
augue. Aliquam ut porttitor leo a. At erat pellentesque adipiscing commodo elit at
imperdiet dui accumsan. Feugiat sed lectus vestibulum mattis ullamcorper velit. Risus
viverra adipiscing at in tellus integer feugiat scelerisque varius. Suscipit tellus
mauris a diam maecenas sed enim ut sem. Quam vulputate dignissim suspendisse in est ante
in nibh. Enim nulla aliquet porttitor lacus.
</div>
</Wrapper.Column>
</Wrapper>
)
}
}License
MIT © nichenqin