在同一页面上将滚动方向从垂直方向更改为水平方向 [英] Changing scroll direction from vertical to horizontal on the same page

问题描述

我正在尝试创建一个单页网站，最初当滚动页面垂直向下时，它会到达底部的整页宽度/高度部分，我希望滚动方向更改为水平。

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();
    });
   } 
 });

但是我需要一种方法，它还可以将方向从上到下滚动，然后从左到右从右到左，从下到上。我对jQuery比较陌生，我不确定实现这个目标的最佳方法。

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.

推荐答案

解决方案的关键是你想要看一下更改后滚动的内容。如果为0，则重新启用垂直滚动。
滚动轮事件每实际滚动发生多次，因此您需要在所有事件结束后执行超时比较。

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

这篇关于在同一页面上将滚动方向从垂直方向更改为水平方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！