A full-page scroll component for react with support for touch events.
Inspired by react-fullpage
- Simple
- Performant
- Touch support
npm install react-fully-scrolled
For mobile compatibility, make sure to disable touchmove events, like so:
document.ontouchmove = function(ev) {
ev.preventDefault();
}
import React, { Component } from 'react'
import { render } from 'react-dom'
import { Scroller, Section } from 'react-fully-scrolled';
class Pages extends React.Component {
render() {
return (
<Scroller
curPage={1}
onBeforeScroll={(from, to) => {}}
onAfterScroll={(page) => {}}
isEnabled={true}
>
<Section>
Page1
</Section>
<Section>
Page2
</Section>
<Section>
Page3
</Section>
<Section>
Page4
</Section>
</Scroller>
)
}
}
render(<Pages />, document.getElementById('root'));
When the component is mounted, a function is added to the global scope:
window.fpTurnTo(pageNum)
See CONTRIBUTING.md