How to enable vertical and horizontal mouse wheel scrolling at certain points

Question

Im struggling to get the horizontal scrolling I implemented in my site to switch from vertical to horizontal and vice versa.

Basically what I want is: if the horizontal scrolling section hits the top of the page it should start scrolling horizontally and if it's at the end it should scroll vertical again. How can I modify my code to get this behaviour.

Im using the jquery.mousewheel.min.js

$(".side_scroll").mousewheel(function(event, delta) {

  this.scrollLeft -= (delta * 10);

  event.preventDefault();

});

.side_scroll {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow-x: scroll;
  overflow-y: hidden;
}

.side_scroll::-webkit-scrollbar {
  display: none
}

.scroll_element {
  height: 100vh;
  width: 100vw;
  min-width: 100vw;
  border: solid 1px black;
}

.full {
  height: 100vh;
  width: 100vw;
  background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jquery/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>

<div class="full">Header</div>
<div class="side_scroll">
  <div class="scroll_element">Section 1</div>
  <div class="scroll_element">Section 2</div>
  <div class="scroll_element">Section 3</div>
</div>
<div class="full">Footer</div>

Max Voisard Max Voisard · Accepted Answer · 2019-07-10T14:36:49

If I understand what you are asking, you want to be able to scroll down to the side-scroll section, and once you reach the right end of the horizontal scroll, you want it to continue scrolling down vertically to the footer. Or if it's on the left side and the user is scrolling the mouse wheel up, it goes up to the header instead of staying still. This CodePen captures what you're looking for, you can change it according to your needs: https://codepen.io/anon/pen/pYpqeJ

How to enable vertical and horizontal mouse wheel scrolling at certain points

1 Answers