带有机车滚动的水平滚动粘性部分答案

【问题标题】：Horizontal scrolling sticky section with Locomotive scroll带有机车滚动的水平滚动粘性部分
【发布时间】：2020-02-06 20:57:58
【问题描述】：

希望使用 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 类似的最终结果（部分进入屏幕，滚动开始，在查看最后一个部分时滚动结束）。

提前致谢

【问题讨论】：

标签： javascript jquery html sticky

【解决方案1】：

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

你需要三个容器，我们可以称之为：

space holder - 此容器将保持垂直空间滚动空间。详情请参阅下文。
sticky - 这个容器有一个固定的高度（在我的例子中是100vh）。也将是position: sticky; top: 0;。
horizontal - 此容器将包含您希望水平滚动的内容。它的宽度将由它包含的内容决定。

要达到预期的效果，您必须将“space holder”的高度设置为“horizontal”的宽度。然后在滚动时，您必须水平平移“horizontal”等于“sticky”的偏移顶部。

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
@Andreas 抱歉不知道。我编辑了答案以包括基本部分
您可以将其标记为与您所指的类似问题重复的答案，而不是复制和粘贴相同的答案
@Andreas 我实际上不能，根据this post，我需要 15 个声望。出于好奇不会将问题标记为重复给我们与仅提供链接相同的问题吗？无论哪种方式，除非他们去查看替代答案，否则用户不会得到他们的问题的回答
那你就等着吧。不，将问题标记为重复不会给出相同的问题，因为它引用了社区的既定答案。然后，如果问题不是重复的，用户可以编辑他们的问题以显示它不是重复的

【解决方案2】：

我一直在为一个项目做完全相同的事情。

偏移似乎是由数据滚动速度引起的。速度越高，屏幕右侧的偏移量就越大。

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

这种方法使水平滚动 div 从正确的位置开始，但它会立即从屏幕顶部开始滚动。因此，仅当您的水平滚动 div 位于顶部且未放置在页面下方时才有效。

如果您还没有解决它，也许这会给您一些想法。如果您确实弄清楚了，请分享您的解决方案。我相信这对我和其他人都非常有帮助！

【讨论】：

不幸的是，没有找到一个防弹的解决方案，最终针对不同的媒体查询进行了很多调整，最终对于非常规的屏幕尺寸来说风险很大。正如您所指出的，位置 top 也不起作用，因为容器需要位于屏幕的中心。感谢您的意见！
很抱歉听到这个消息。当我终于到达那里时，我会发布我的解决方案......

【解决方案3】：

对我有用的方式：

摆脱机车水平滚动；
在滚动处理程序上添加机车，以便您拥有当前滚动的 y 位置；
在滚动处理程序中添加一些数学/逻辑来回答问题：

“必须平移多少像素水平部分，知道平移距离必须与滚动的垂直像素成比例”

滚动 - 翻译您的水平部分；

还要记住，视口不是正方形，因此垂直滚动的距离大于水平滚动的距离。

基本上，我没有找到使用机车水平滚动来处理这个问题的方法。

【讨论】：