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

Question

我正在尝试制作一个部分相互对齐的网站，除了一个部分，我希望它的内容水平对齐并在到达该部分时水平滚动。

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

演示

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>

标签： javascriptcss

Answer 1

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

出于参考目的，我从 codepen 粘贴这些示例：

示例1

$(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);
  
  
  
});

示例2

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);