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

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

标签： javascriptjqueryhtmlcss

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