Как определить, что элемент вышел за пределы страницы?

Я пытаюсь сделать анимацию по аналогии как на сайте https://k24moscow.ru/en/location/

Я делаю так, что когда доходит до блока на body вешаю overflow-hidden и потом делаю translatex для блока.

Вот мой код https://codepen.io/antbelogurov/pen/oNoEWBq?editors=1111

window.onscroll = function (evt) {
let offsetElemetnt = $(".block").offset().top;
 let offsetDoc = $("html").scrollTop();

 if (offsetDoc + 1 >= offsetElemetnt) {
  $("body").addClass("over");
  let cnt = 0;
  document.addEventListener("wheel", function (event) {
  var left_scroll = $(document).scrollLeft();
  var screen_width = $(window).width();
  event = event || window.event;
  var y = event.deltaY || event.detail || event.wheelDelta,
    val = 0.1,
    min = 0,
    max = 0;
  const element = $(".block");
  const widthEl = element.width();
  if (y > 0) {
    cnt = cnt + 10;
    if (cnt > 100) {
      $("body").removeClass("over");
    } else {
      element.css("transform", `translateX(calc(${cnt}vw - ${widthEl}px)`);
    }
   }
   if (y < 0) {
    cnt = cnt - 10;
    element.css("transform", `translateX(calc(${cnt}vw - ${widthEl}px)`);
   }
     });
   } else {
    $("body").removeClass("over");
   }
   };

Как сделать так, чтобы блок не выезжал за пределы страницы? и начинался в начале страницы и заканчивался ровно в конце