Home » Jquery » javascript – Horizontal scrolling of div as page scroll

javascript – Horizontal scrolling of div as page scroll

Posted by: admin February 22, 2020 Leave a comment

Questions:

I try to make a horizontal scrolling inside a div. Scrolling happens as the user scrolls the page. Somehow I manage to scroll the div, but it does not look pleasant. I don’t know what the error is happening.

Let me try to explain to you the UI as much as I can. I have a div somewhere in the middle of the page. When the user scroll and reach the scrolling section, it start scrolling from right to left as user scroll, once the next section appears in the viewport, its horizontal scrolling gets to stop. The same thing happens when the user moves from bottom to top inside the page. here is my code sample.

Please help. let me know in the comment if you want any additional information about the problem.

$(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>
How to&Answer: