0

I am currently creating a react site and am trying to change the scrollbar to scroll 100vh at a time. I have looked for a package to do this but i haven't managed to find one, so if someone could point me in the right direction that'd be much appreciated.

Vikas Yadav
  • 3,094
  • 2
  • 20
  • 21
Zach Nurcombe
  • 1
  • 4

1 Answers1

0

I solved this without a package: 

class App extends React.Component {

  componentDidMount() {

    var mouseDown = false;
    window.onmouseup = () => mouseDown = false;
    window.onmousedown = () => mouseDown = true;
    var previousScroll = 0;

    //scroll a screen-height, unless mouse is down (dragging scroll-bar)
    window.addEventListener('scroll', (event) => {
      if (window.scrollY > previousScroll && !mouseDown) {
        window.scroll(0, previousScroll + window.innerHeight);
      } else if (window.scrollY < previousScroll && !mouseDown) {
        window.scroll(0, previousScroll - window.innerHeight);
      }
      previousScroll = window.scrollY;
    });

  }

  render() {
    return ( 
      <div className = "container">
        <h2> Scroll down to jump {'\u2728'} </h2> 
        <div id="a1" style={{ backgroundColor:"brown", width: "100%", minHeight: "500px"}}></div>
        <div id="a2" style={{ backgroundColor: "pink", width: "100%", minHeight: "500px" }}></div>
        <div id="a2" style={{ backgroundColor: "yellow", width: "100%", minHeight: "500px" }}></div>
        <hr/>
      </div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

I think the same is possible also with jQuery. There are plenty of questions around, for example jquery-jump-to-anchors-on-scroll. Also: how to use jquery within react.

Rikku
  • 428
  • 6
  • 14