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

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">