如何在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);

我建議您閱讀文檔並使用演示來弄清楚發生了什么。 但本質上，您設置了一個包含動畫的控制器。

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