帶有機車滾動條的水平滾動粘性部分

Question

希望使用 Locomotive 滾動框架 ( https://github.com/locomotivemtl/locomotive-scroll ) 在具有以下結構的粘性 div 內創建水平滾動部分。 我的 HTML 如下：

<div id="sec01" class="the-height-400vh-section"><!-- this has the same height as does the 400vh width, timing should match -->
    <div class="the-sticky-div" id="sticky"  data-scroll data-scroll-sticky data-scroll-target="#sec01"><!-- this is stickying to viewport while we scroll -->
        <div class="the-overflow-hidden-mask">
            <div class="the-width-400vh-scrollable-div" data-scroll data-scroll-direction="horizontal" data-scroll-speed="12" data-scroll-target="#sec01"><!-- we're scrolling this 400vh to the right while we're scrolling the 400vh height of the parent -->
                <div class="the-content">
                    <div class="a-block"></div>
                    <div class="a-block"></div>
                    <div class="a-block"></div>
                    <div class="a-block"></div>  
                </div>
            </div>
        </div>
    </div>
</div>

並應用了以下 CSS：

.the-sticky-div {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
  background: #ccc;
  z-index: 1;
}
.the-overflow-hidden-mask {
  position: relative;
  z-index: 200;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #000;
}
.the-height-400vh-section {
  position: relative;
  display: flex;
  height: 400vh;
  margin-left: 0px;
  justify-content: center;
  align-items: center;
  border-top: 60px none rgba(36, 36, 36, 0.09);
  background-color: #fff;
}

.the-width-400vh-scrollable-div {
  display: flex;
  width: 400vh;
  position:relative;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  will-change: transform;
}
.the-content {
  display: flex;
  width: 100%;
  height: 100%;
  padding-bottom: 10vh;
  justify-content: flex-start;
  align-items: flex-end;
  .a-block {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    left:0;
    margin-right: 40px;
    margin-left: 40px;
    flex: 0 0 auto;
    border-radius: 6px;
    background-color: hsla(0, 0%, 87.1%, 0.72);
    box-shadow: 0 0 100px 8px rgba(205, 43, 177, 0.25);
  }
}

這背后的邏輯應該是這樣的：

但我有兩個主要問題：

• 水平滾動初始化過早

• 水平內容從右側滑入，不在初始位置開始滾動。

任何想法可以用當前的解決方案來實現類似於 www.reformcollective.com 的最終結果（部分進入屏幕，滾動開始，在查看最后一部分時滾動結束）。

提前致謝

Answer 1

您不需要 Locomotive Scroll 只需20 行香草 JS 。

您需要三個容器，我們可以將其稱為：

1. space holder - 此容器將保持垂直空間滾動空間。 更多關於這個下面。
2. 粘性 - 此容器將具有設定的高度（在我的示例中為100vh ）。 它也將是position: sticky; top: 0; position: sticky; top: 0; .
3. 水平 - 此容器將包含您希望水平滾動的內容。 它的寬度將由它包含的內容決定。

為了達到預期的效果，您必須將“space holder”的高度設置為“horizo​​ntal”的寬度。 然后在滾動時，您必須水平平移“水平”等於“粘性”的偏移頂部。

在這里查看我對類似問題的回答。

Answer 2

我一直在為一個項目做同樣的事情。

偏移似乎是由數據滾動速度引起的。 速度越高，屏幕右側的偏移量越大。

我目前正在您的示例中的“the-width-400vh-scrollable-div”類上試驗 data-scroll-position="top" 。

這種方法使水平滾動 div 在正確的位置開始，但它立即從屏幕頂部開始滾動。 因此，因此僅當您的水平滾動 div 位於頂部而不是放置在頁面下方時才有效。

如果你還沒有解決它，也許這會給你一些想法。 如果您確實弄清楚了，請分享您的解決方案。 這對我和其他人都非常有幫助，我敢肯定！

Answer 3

對我有用的方式：

• 擺脫機車水平滾動；
• 在滾動處理程序上添加機車，以便您擁有當前滾動的 y 位置；
• 在滾動處理程序中添加一些數學/邏輯來回答問題：

“必須平移多少像素水平部分，知道平移距離必須與滾動的垂直像素成比例”

• 滾動 - 翻譯您的水平部分；

還要記住，視口不是正方形，因此垂直滾動的距離大於水平滾動的距離。

基本上，我沒有找到使用機車水平滾動來處理這個問題的方法。