在同一页面上将滚动方向从垂直方向更改为水平

Question

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

我一直在使用以下代码将滚动方向更改为水平，当它到达页面底部时：

$(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比较陌生，我不确定实现这个目标的最佳方法。

Answer 1

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

对于我下面的例子，我使用了一些小图像来创建垂直高度，然后添加了一个非常大的图像来产生水平宽度。

最初，我们启用垂直滚动，然后当我们到达页面底部时，我们启用水平滚动。在水平滚动期间，如果我们到达滚动条中的最左侧点，我们将重新启用垂直滚动。

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