将div作为页面滚动水平滚动

Question

我尝试在div内进行水平滚动。滚动是在用户滚动页面时发生的。我以某种方式设法滚动了div，但是看起来并不愉快。我不知道发生了什么错误。

让我尽我所能向您解释UI。我在页面中间某处有一个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>