javascript - 带机车滚动的水平滚动粘性部分

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

你不需要机车卷轴 20 lines of vanilla JS .

您需要三个容器，我们可以将其称为:

1. 空间持有者 - 该容器将维持垂直空间滚动空间。下面详细介绍这一点。
2. sticky - 该容器将具有设定的高度(在我的示例中为100vh)。它也将是 position: Sticky;顶部:0；。
3. 水平 - 此容器将包含您希望水平滚动的内容。它的宽度将由它包含的内容决定。

要达到所需的效果，您必须将“空间保持器”的高度设置为“水平”的宽度。然后在滚动时，您必须水平翻译“horizo​​ntal”等于“sticky”的顶部偏移量。

查看我对类似问题的回答 here .