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

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

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

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

在此处输入图像描述

解决方案的关键是您想要在更改后查看滚动条的内容。 如果为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) }); }