如何在 javascript 和/或 css 中向下滚动时水平移动 div

有谁知道我怎样才能获得像本网站底部那样的轮播效果https://brand.twitch.tv/ ??

我使用了在 codepen 中找到的这个示例来了解本节的结构。

但是当尝试使用垂直滚动将其添加到我的网站时，它不是像 twitch 网站中那样的连续滚动，而是另一个滚动中的滚动。这对用户来说感觉很奇怪，如果向下滚动太快，您可能会错过它。

提前致谢！

https://codepen.io/lemmin/pen/xRyXMZ

    body {
      margin:0;
      font-family:Georgia;
    }
    #container .box {
      width:100vw;
      height:100vh;
      display:inline-block;
      position:relative;
    }
    #container .box > div {
      width:100px;
      height:100px;
      font-size:96px;
      color:#FFF;
      position:absolute;
      top:50%;
      left:50%;
      margin:-50px 0 0 -50px;
      line-height:.7;
      font-weight:bold;
    }
    #container {
      overflow-y:scroll;
      overflow-x:hidden;
      transform: rotate(270deg) translateX(-100%);
      transform-origin: top left;
      background-color:#999;
      position:absolute;
      width:100vh;
      height:100vw;
    }
    #container2 {
      transform: rotate(90deg) translateY(-100vh);
      transform-origin: top left;
      white-space:nowrap;
      font-size:0;
    }
    
    .one {
      background-color: #45CCFF;
    }
    .two {
      background-color: #49E83E;
    }
    .three {
      background-color: #EDDE05;
    }
    .four {
      background-color: #E84B30;
    }

    <div id="container">
      <div id="container2">
        <div class="box one"><div>1</div></div>
        <div class="box two"><div>2</div></div>
        <div class="box three"><div>3</div></div>
        <div class="box four"><div>Last</div></div>
      </div>
    </div>

实现此目的的一种方法是使用卷轴魔法。学习曲线有点陡峭，但回报是值得的。

https://codepen.io/sean_pwc/pen/wvaaYWE

我已经分叉了你的笔并稍作修改。这是它的工作原理。

1) 我们添加了一堆 div，我们希望它们成为正常页面滚动的一部分。这里没什么新鲜事。

<div class="scroll-vertical">
   <div class="v-box one">1</div>
   <div class="v-box two">2</div>
   <div class="v-box three">3</div>
   <div class="v-box four">Last</div>
</div>

我将高度设置为 300 像素，并且这些框占据了屏幕的整个宽度。然后我们添加一个我们想要水平滚动的部分。请注意盒子上样式的变化 - flex-direction 设置为 row，以便盒子彼此相邻，并且我们在它们上设置宽度。

<div id="scrollHorizontal">
   <div class="h-box one">1</div>
   <div class="h-box two">2</div>
   <div class="h-box three">3</div>
   <div class="h-box four">4</div>
</div>

魔法来了。

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

我建议您阅读docs并尝试演示以了解发生了什么。但本质上你设置了一个包含动画的控制器。

var controller = new ScrollMagic.Controller();

然后我们定位我们想要移动的元素。在这里，我们的目标是 #scrollHorizo​​ntal，它是 h 框的包装器，然后我们告诉它自己一直向左移动，直到它离开屏幕。就像您将侧面导航放置在屏幕之外一样。

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

现在这样就可以了，但是垂直滚动仍然会生效，而且感觉不太好。因此，我们将要滚动的元素固定到屏幕顶部 - 本质上，scrollmagic 添加了一堆空白（由持续时间键设置，其高度以像素为单位），用户可以滚动它，但它隐藏在固定后面，我们只是看到你在scrollHorizo​​ntal中设置发生的任何事情（完全向左移动）。

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

因此，我们设置一个目标元素，当浏览器检测到它时，该元素将被固定，您在 newTimelineLite() 中声明的动画将在您设置的持续时间内执行，然后当持续时间结束时，我们取消固定并继续回到自然的垂直滚动。调整持续时间来改变水平滚动的速度。

参考：

https://scrollmagic.io/ https://scrollmagic.io/docs/index.html

EDIT

我应该补充一下，codepen 使用了 4 个脚本：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js