Зацикливание при скролле блока

let currentLocation = 'firstPage';
let autoScrolling = false;

let [firstHeight,secondHeight,thirdHeight] = [$('#firstPage').offset().top,
 $('#secondPage').offset().top,
 $('#thirdPage').offset().top];

$(document).scroll(e => {
    let scrolled = $(window).scrollTop();
    // Если user поскроллил
    if (!autoScrolling) {
        if (scrolled > 1 && currentLocation == 'firstPage') {
            scrollPage(secondHeight, 'secondPage');
        } else if (scrolled > secondHeight + 1 && currentLocation == 'secondPage') {
            scrollPage(thirdHeight, 'thirdPage');
        } else if (scrolled < thirdHeight - 1 && currentLocation == 'thirdPage') {
            scrollPage(secondHeight, 'secondPage');
        } else if (scrolled < secondHeight - 1 && currentLocation == 'secondPage') {
            scrollPage(firstHeight, 'firstPage');
        }
    }

    function scrollPage(nextHeight, page){
      currentLocation = page; autoScrolling = true;
      $('body,html').animate({scrollTop:nextHeight}, 500, () => {
          autoScrolling = false;
      });
    }
})

.banner,
.shopping,
.looks {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100vh;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner" id="firstPage">
</div>
<div class="shopping" id="secondPage">
</div>
<div class="looks" id="thirdPage">
</div>
<div class="sliders">
</div>