Горизонтальная прокрутка div как прокрутка страницы

Question

Я пытаюсь сделать горизонтальную прокрутку внутри div. Прокрутка происходит, когда пользователь прокручивает страницу. Как-то мне удается прокрутить div, но это не выглядит приятным. Я не знаю, в чем ошибка.

Позвольте мне попытаться объяснить вам интерфейс настолько, насколько я смогу. У меня есть div где-то в середине страницы. Когда пользователь прокручивает и достигает секции прокрутки, он начинает прокручиваться справа налево как прокрутка пользователя, как только следующая секция появляется в области просмотра, ее горизонтальная прокрутка останавливается. То же самое происходит, когда пользователь перемещается снизу вверх внутри страницы. Вот мой пример кода.

Пожалуйста, помогите. дайте мне знать в комментарии, если вам нужна дополнительная информация о проблеме.

$(document).ready(function() {
  var activityContainer = $(".activities-container").offset().top;
  var activityHeight = $(".activity-container").css("height");
  var activityTotalWidth = parseFloat($(".activities-section").css("width"));
  var nextSection = $(".footer-container").offset().top;
  $(window).on("scroll", function() {
    let top = $(this).scrollTop();
    let scrollOffset = top - activityContainer;
    if (top >= activityContainer && top < nextSection) {
      $(".activities-container").addClass("scroll-activity");
      scrollActivity(scrollOffset);

    } else {
      $(".activities-container").removeClass("scroll-activity");
    }


  });

  function scrollActivity(value) {
    value = -value;
    console.log(value);
    $(".activities-section").css("transform", "translateX(" + value + "px" + ")");
  }
})

.full-height {
  min-height: 100vh;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.all-center {
  align-items: center;
  justify-content: center;
}

.bg-gray {
  background-color: #e3e3e3;
}

.bg-black {
  background-color: #333;
}

.activities-container {
  overflow: hidden;
}

.activities-container>.col-md-12 {
  width: 180%;
  white-space: nowrap;
  height: 100%;
  display: flex;
}

.activity-box {
  transition: all 0.3s linear;
  width: 30%;
}

.activity-box:not(:last-child) {
  margin-right: 60px;
}

.flex-direction-column {
  flex-direction: column;
}

.horizontal-center {
  justify-content: center;
}

.color-white {
  color: #fff;
}

.scroll-activity {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 5;
}

.scroll-activity+.row {
  margin-top: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row full-height bg-black">
  </div>
  <div class="row full-height bg-gray">
  </div>

  <div class="row bg-black activities-container pdr-default pdl-default full-height horizontal-center flex-direction-column">
    <h3 class="large-heading color-white opensans-bold mgb-60">Our Activities</h3>
    <div class="col-md-12 activities-section ">
      <div class="activity-box">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="img" alt="Image" />
        <h3 class="opensans color-white heading mgt-10">Heading</h3>
        <p class="paragraph color-white opensans mgt-10">Lorep ipsum is simply dummy text. Lorep ipsum is simply dummy text.

        </p>

      </div>
      <div class="activity-box">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="img" alt="Image" />
        <h3 class="opensans color-white heading mgt-10">Heading</h3>
        <p class="paragraph color-white opensans mgt-10">Lorep ipsum is simply dummy text. Lorep ipsum is simply dummy text.

        </p>

      </div>
      <div class="activity-box">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="img" alt="Image" />
        <h3 class="opensans color-white heading mgt-10 ">Heading</h3>
        <p class="paragraph color-white opensans mgt-10">Lorep ipsum is simply dummy text. Lorep ipsum is simply dummy text.

        </p>

      </div>
      <div class="activity-box">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="img" alt="Image" />
        <h3 class="opensans color-white heading mgt-10">Heading</h3>
        <p class="paragraph color-white opensans mgt-10">Lorep ipsum is simply dummy text. Lorep ipsum is simply dummy text.

        </p>

      </div>
      <div class="activity-box">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="img" alt="Image" />
        <h3 class="opensans color-white heading mgt-10">Heading</h3>
        <p class="paragraph color-white opensans mgt-10">Lorep ipsum is simply dummy text. Lorep ipsum is simply dummy text.

        </p>

      </div>
      <div class="activity-box">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="img" alt="Image" />
        <h3 class="opensans color-white heading">Heading</h3>
        <p class="paragraph color-white opensans">Lorep ipsum is simply dummy text. Lorep ipsum is simply dummy text.

        </p>

      </div>

    </div>

  </div>
  <div class=" row footer-container full-height bg-gray">
  </div>
</div>