时间戳

首页 > 解决方案 > 带有机车滚动的水平滚动粘性部分

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

问题描述

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

提前致谢

标签： javascriptjqueryhtmlsticky

解决方案

你不需要 Locomotive Scroll 只需20 行 vanilla JS。

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

  1. space holder - 此容器将保持垂直空间滚动空间。更多关于这下面。
  2. 粘性 - 这个容器将有一个设定的高度（100vh在我的例子中）。它也将是position: sticky; top: 0;。
  3. 水平 - 此容器将包含您希望水平滚动的内容。它的宽度将由它包含的内容决定。

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

在此处查看我对类似问题的回答。

推荐阅读