JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
     <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
     <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
     <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

CSS

#wrapper,
.section {
  width:100%;
  float:left;
}

.section { 
  height:80px;
  border:1px solid #ccc; 
}

JavaScript

$(document).on('mousemove', function(e) {
  var y = e.clientY;
  var h = $(window).height();
  var n = h - y;  
  if (n < 200) {
    var t = parseFloat($(window).scrollTop());
    console.log(t);
    $('html,body').animate({scrollTop:t + 200 + 'px'},200);
  } else {
    $('html,body').stop();
  }
});