Javascript 将垂直滚动方向更改为水平

我正在处理一个项目，我想在与下图相同的位置上更改滚动方向，并使该部分的宽度与以下ID相同#左，#中，#右下方是我的代码

节{边距：0；填充：0；高度：100vh；}
截面：第n种类型（1n）{宽度：100%；高度：100vh；背景色：#fc1c1c；}
截面：第n种类型（2n）{宽度：100%；高度：100vh；背景色：#FE4B74；}
截面：第n种类型（3n）{宽度：5840px；背景色：#fcfc；}
#左、#中、#右{显示：内联块；}
#左{最大宽度：100%；宽度：1920px；高度：100vh；背景：蓝色；填充：10px；}
#中间{最大宽度：100%；宽度：1920px；高度：100vh；背景：绿色；填充：10px；}
#右{最大宽度：100%；宽度：1920px；高度：100vh；背景：黄色；填充：10px；}
剖面：第n种类型（4n）{宽度：100%；背景色：#e21cfc；}
满足于此

满足于此

满足于此
满足于此
满足于此
满足于此

scrollVert（）；
var左=0；
函数scrollVert（）{
$（'html，body，*'）.off（'mouseweel'）.mouseweel（函数（e，delta）{
this.scrollTop-=（增量*40）；
e、 预防默认值（）；
setTimeout（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）==$（文档）.height（））
scrollHoriz（）；
}, 0)
});
}
函数scrollHoriz（）{
$（'html，body，*'）.off（'mouseweel'）.mouseweel（函数（e，delta）{
这个.scrollLeft-=（增量*40）；
e、 预防默认值（）；
scrollLeft=this.scrollLeft
setTimeout（函数（）{
如果（scrollLeft==0）scrollVert（）；
}, 0)
});
}

我认为最好的解决办法是。它们提供了许多滚动功能（非常灵活）和其他功能，如轻量级和响应性

至于有一些水平滚动的扇区，他们有一个很好的演示：它符合你所描述的

---

希望对你有所帮助。

我认为对你的情况最好的解决办法是。它们提供了许多滚动功能（非常灵活）和其他功能，如轻量级和响应性

至于有一些水平滚动的扇区，他们有一个很好的演示：它符合你所描述的

---

希望这能有所帮助。

感谢您的回复，它能工作，但我希望，如果我的代码能够工作，因为我仍然希望包含一个拖动到水平滚动的功能，而不是重新创建滚动功能，只需使用ScrollMagic库并以正确的方式实现它。从长远来看，这将更容易，也更有益。感谢您的响应，它可以工作，但我希望，如果我的代码可以工作，因为我仍然希望包含一个拖动到水平滚动的功能，而不是重新创建滚动功能，只需使用ScrollMagic库并以正确的方式实现它。从长远来看，这将更容易、更有益。

<style>
section{margin: 0;padding: 0;height: 100vh;}
section:nth-of-type(1n) {width: 100%;height: 100vh;background-color: #fc1c1c;}
section:nth-of-type(2n) {width: 100%;height: 100vh; background-color: #FE4B74;}
section:nth-of-type(3n) {width: 5840px;background-color: #fcfcfc;}
#left, #middle, #right {display: inline-block;}
#left {max-width:100%; width: 1920px; height: 100vh;  background: blue; padding:10px;}
#middle {max-width:100%; width: 1920px; height: 100vh; background: green; padding:10px;}
#right {max-width:100%; width: 1920px; height: 100vh;  background: yellow; padding:10px;}
section:nth-of-type(4n) {width: 100%;background-color: #e21cfc;}
</style>

<script src="jquery-2.1.1.min.js"></script>
<script type='text/javascript' src='jquery.mousewheel.min.js'></script>

<section><p>Content Here</p></section>
<section><p>Content Here</p></section>
<section>
    <div id="left">Content Here</div>       
    <div id="middle">Content Here</div> 
    <div id="right">Content Here</div>
</section>

<section><p>Content Here</p></section>

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