更改每個部分的滾動方向

Question

現在我從 webflow 看到了這個頁面，這給了我很多啟發。

在此頁面中，您開始水平滾動，然后當您到達某個區域時，滾動方向會發生變化，以便頁面開始垂直滾動。

有沒有辦法做到這一點？ （最好是 vanillaJS，但 jQuery 會很好）

Answer 1

基本上沒有內置於標准或 jQuery 中的設置解決方案（我真的不推薦使用 jQuery）。 我沒有搜索是否有一個庫來執行此操作（我懷疑有，如果可能的話你應該使用一個而不是手動構建），但我將嘗試大致解釋它在 vanilla JS/CSS 中的用途。

我們可以構造一個很長的元素（包括你想通過滾動顯示的內容），並使用一些裁剪機制，以便只顯示其中的一部分。 這基本上是通過overflow: hidden; .

接下來這個長元素應該隨着滾動而移動。 添加一個調整transform屬性（特別是translate函數）的onscroll事件偵聽器可以做到這一點。

這些元素的行為應該很神奇：它們滾動到一個位置，停止並停留在那里，直到它們到達另一個滾動位置，然后繼續滾動離開。 這是通過以下position: sticky; CSS 屬性。 看看MDN 怎么說：

元素按照文檔的正常流程定位，然后相對於其最近的滾動祖先和包含塊（最近的塊級祖先）偏移，包括與表格相關的元素，根據top、right、bottom的值，走了。 偏移量不會影響任何其他元素的位置。

這有點難以理解，但關鍵是它會一直保持原狀，就好像它是一個普通元素一樣，直到到達您通過top/bottom/left/right屬性設置的位置。 然后它會一直停留在那個位置，直到它與它的父元素（“最近的滾動祖先”）一起滾動離開。

所以現在你有一個元素

• 真的很長，但只顯示了一部分
• 可以隨着鼠標滾動移動，以便用戶看到更多滾動
• 在頁面的一部分中停留在固定位置，然后滾動離開

這基本上就是你想要的效果。

這三個步驟是您提到的這種奇特效果的基本構建塊。 當然應該有許多我沒有在這里概述的討厭的實現細節，但我希望這個答案能幫助你簡要了解幕后發生的事情。