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.

You need to create a minimum sample of code that replicates your issue — Mihai T
Are you looking for Parallax effects? There are parallax plugins that accomplish what you need. Just google 'parallax plugins' and take a look there. — besciualex
If you create a list horizontal inside a vertical list works? The only problem is that you can scroll up in any place of the Horizontal list — Canato
Hi @besciualex I'm not looking for parallax. I want to be able to achieve this with the mousewheel — Jess Cauchi

Rich Rich · Accepted Answer · 2018-05-30T16:05:03

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

Changing scroll direction from vertical to horizontal on the same page

1 Answers