javascript - Changing scroll direction from vertical to horizontal on the same page

Question

I'm trying to create a one page site where initially when scrolling the page will go down vertically, it then gets to a full page width/height section at the bottom where I want the scrolling direction to change to horizontal.

I have been using the following code to change the scroll direction to horizontal when it reaches the bottom of the page:

$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() == $(document).height()) {
   $("body").css("overflow-x", "auto", "overflow-y", "hidden");
     $('html, body, *').mousewheel(function(e, delta) {
      this.scrollLeft -= (delta * 30);
      e.preventDefault();
    });
   } 
 });

However I need a method which will also revert the direction from scrolling top to bottom and then left to right to right to left and bottom to top. I'm relatively new to jQuery and i'm unsure of the best way to achieve this.

Answer 1

The key to your solution is that you want to look at what the scroll left is after changing it. If it is 0, then you re-enable vertical scrolling. Scroll wheel event occur many times per actual scroll, so you need to perform the comparison on a timeout, after all events finish.

For my example below, I used some small images to create vertical height, then added a very large image to produce horizontal width.

Initially, we enable vertical scrolling, then when we reach the bottom of the page, we enable horizontal scrolling. During horizontal scrolling, if we reach the left most point in the scroller, we re-enable vertical scrolling.

scrollVert();
var scrollLeft=0;

function scrollVert() {
  $('html, body, *').off('mousewheel').mousewheel(function(e, delta) {
    this.scrollTop -= (delta * 40);
    e.preventDefault();
    setTimeout(function() {
      if ($(window).scrollTop() + $(window).height() == $(document).height())
        scrollHoriz();
    }, 0)

  });
}
function scrollHoriz() {
  $('html, body, *').off('mousewheel').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 40);
    e.preventDefault();
    scrollLeft=this.scrollLeft
    setTimeout(function() {
      if (scrollLeft == 0) scrollVert();
    }, 0)
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jquery/jquery-mousewheel/master/jquery.mousewheel.js"></script>

<img src="http://i.imgur.com/jYxGsiT.jpg">  
<img src="http://i.imgur.com/esEVTYV.jpg">  
<img src="http://i.imgur.com/n55bFJm.jpg">