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.

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked May 30, 2018 at 14:50 Jess CauchiJess Cauchi 30311 gold badge44 silver badges1414 bronze badges 4

• You need to create a minimum sample of code that replicates your issue – Mihai T Commented May 30, 2018 at 14:53
• Are you looking for Parallax effects? There are parallax plugins that acplish what you need. Just google 'parallax plugins' and take a look there. – besciualex Commented May 30, 2018 at 14:54
• 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 Commented May 30, 2018 at 14:54
• Hi @besciualex I'm not looking for parallax. I want to be able to achieve this with the mousewheel – Jess Cauchi Commented May 30, 2018 at 14:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 parison 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit./jquery/jquery-mousewheel/master/jquery.mousewheel.js"></script>

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