javascript - 到达部分时从垂直滚动更改为水平滚动

Question

我正在尝试制作一个网站，该网站的各个部分彼此对齐，但我希望它的内容水平对齐并在到达该部分时也水平滚动的部分除外。

下面是我能做的，但是水平和垂直滚动同时起作用。那么我如何检测到该部分已到达以及如何在启动水平滚动时停止垂直滚动？

DEMO

var item = document.getElementsByTagName('MAIN')[0];

window.addEventListener('wheel', function(e) {

  var percent = 100 * item.scrollLeft / (item.scrollWidth - item.clientWidth);

  if (e.deltaY > 0) {
    item.scrollLeft += 100;
  } else item.scrollLeft -= 100;
});

body {
  padding: 0;
  margin: 0;
}

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  -webkit-overflow-scrolling: touch;
}

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: auto;
}

.wrapper>div {
  pointer-events: none;
  flex: 0 0 auto;
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.more {
  height: 100vh;
  width: 100vw;
  background-color: yellow;
}

.exmpl:-webkit-scrollbar {
  display: none;
}

<main style="overflow: scroll hidden;">
  <div class="wrapper">
    <div style="background-color:red"></div>
    <div class="exmpl" style="background-color:blue"></div>
  </div>
</main>
<div class='more'></div>

Answer 1

我刚才问过这个问题，但没有人回答我的问题，所以我想选择像 scrollmagic 这样的库是最好的解决方案。

出于引用目的，我从 codepen 中粘贴了这些示例:

exemple1

$(function () { // wait for document ready
  
  var controller = new ScrollMagic.Controller();

  var horizontalSlide = new TimelineMax()
  // animate panels
  .to("#js-slideContainer", 1,   {x: "-20%"})   
  .to("#js-slideContainer", 1,   {x: "-40%"})
  .to("#js-slideContainer", 1,   {x: "-60%"})
  .to("#js-slideContainer", 1,   {x: "-80%"})


  // create scene to pin and link animation
  new ScrollMagic.Scene({
    triggerElement: "#js-wrapper",
    triggerHook: "onLeave",
    duration: "400%"
  })
    .setPin("#js-wrapper")
    .setTween(horizontalSlide)
    //.addIndicators() // add indicators (requires plugin)
    .addTo(controller);
  
  
  
});

exemple2

var controller = new ScrollMagic.Controller();

var scrollHorizontal = new TimelineLite()
  scrollHorizontal.to("#scrollHorizontal", 1, {x:'-100%'})

var horizontalScroll = new ScrollMagic.Scene({
      triggerElement: "#scrollHorizontal",
      triggerHook: 'onLeave',
      duration: 3000
    }).setPin("#scrollHorizontal").setTween(scrollHorizontal).addTo(controller);