如果仅进行少量滚动或推动，则滚动到元素

Question

我正在尝试在用户开始滚动时自动滚动到某个元素，即仅给出一个小的滚动冲动或微调。因此，当用户开始向下滚动时，它将自动将页面向上移动到下一部分。如果他开始向上滚动，页面应自动向上移动到上一部分。到目前为止，我所拥有的代码以某种方式只是使所有内容变得非常不协调。

我希望滚动条在这里像这样工作：https://www.redlinespecialistcars.co.uk

jsfiddle演示此处：https://jsfiddle.net/ch2Lg6vq

$(document).ready(function() {

  var browserheight = $(window).height();

  $(window).on('scroll', function() {

    $('.control-parent').each(function() {

      var scrollTop = $(window).scrollTop();
      var elementOffset = $(this).offset().top;
      var distance = (elementOffset - scrollTop);

      if (distance >= browserheight - 2) {
        $([document.documentElement, document.body]).animate({
          scrollTop: $(this).offset().top
        }, 1000);
      }

      if (distance <= browserheight - 2) {
        // do sthg else
      }

    }); // end for each
  }); // end on.scroll
}); // end document.ready

html,body{
  width:100%;
  height:100%;
  position:relative;
}
.control-parent{
  width:100%;
  height:100%;
  position:relative;
  background-color:#eeeeee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-parent">
1
</div>
<div class="control-parent">
2
</div>
<div class="control-parent">
3
</div>
<div class="control-parent">
4
</div>