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

Question

有人知道我怎样才能获得像本网站底部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>

Answer 1

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

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-box 的包装器，然后我们告诉它一直向左移动，直到它离开屏幕。就像您将侧导航定位在屏幕之外一样。

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

现在这样可以了，但是垂直滚动还是会生效，感觉不太好。所以我们将要滚动的元素固定到屏幕顶部 - 本质上，scrollmagic 添加了一堆空白（由持续时间键设置，它是以像素为单位的高度），用户滚动浏览，但它隐藏在 pin 后面，我们只看到你在 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

编辑

我应该补充一下，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