为什么不先移动鼠标就不能滚动通过我的视差？

Question

所以我想做一个带有视差登陆图片的网页。为了使视差效果起作用，它具有更高的高度，因此用户必须向下滚动。这会在侧面仅为此视差创建第二个滚动条。到目前为止，一切都很好。问题是当我向下滚动到 Parallax 的末尾时，第二个滚动条没有自动激活，我必须稍微移动鼠标才能继续滚动网页的正常内容。这是我的问题的一个工作示例：

Codepen

有什么方法可以让它在到达视差的末端后继续滚动而无需先移动鼠标？

* {
  box-sizing: border-box;
}

html,
body {
  background-color: #fedcc8;
}

.parallax {
  -webkit-perspective: 100px;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  margin-left: -1500px;
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
}

.parallax__cover {
  background: #2d112b;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1000px;
  z-index: 2;
}

.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
}

.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer__2 {
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
}

.parallax__layer__3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer__4 {
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
}

.parallax__layer__5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer__6 {
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
}

<section>
  <div style="height: 100vh">
    <div class="parallax">
      <div class="parallax__layer parallax__layer__0">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__1">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__2">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__3">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__4">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__5">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__6">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
      </div>
      <div class="parallax__cover"></div>
    </div>
  </div>
</section>

<section>
  <v-col class="pa-5" cols="12" md="6">
    <span class="d-flex justify-center mb-5">
              Lorem ipsum dolor sit amet, consectetur adipi<br />
              scin elit. Etiam vulputate augue vel felis gravida<br />
              porta. Lorem ipsum dolor sit amet.
              Lorem ipsum dolor sit amet, consectetur adipi<br />
              scin elit. Etiam vulputate augue vel felis gravida<br />
              porta. Lorem ipsum dolor sit amet.
              Lorem ipsum dolor sit amet, consectetur adipi<br />
              scin elit. Etiam vulputate augue vel felis gravida<br />
              porta. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipi<br />
              scin elit. Etiam vulputate augue vel felis gravida<br />
              porta. Lorem ipsum dolor sit amet.
            </span>
    <span class="d-flex justify-center">
              Skills
            </span>

    <span class="d-flex justify-center mb-5">
              Lorem ipsum dolor sit amet, consecte tur adipi scin e<br />
              lit. Etiam vulputate augu e vel felis gravida porta.
            </span>
    <v-row>

    </v-row>
  </v-col>
</section>

感谢任何帮助！

Answer 1

首先，我建议在 .parallax 中添加一个 position: relative; 以便 remove the double scroll。

您遇到的问题是与浏览器相关的滚动问题，而不是您的代码问题（它在 Firefox 上有效，但在 Chrome 上无效）。所以没有 "fix".

但显然还有其他方法可以使用视差来防止问题发生，例如手动滚动每个视差而不依赖浏览器的滚动。

或者您可以在到达顶部或底部时模拟点击以解决问题：

$('div').on('scroll', chk_scroll);

function chk_scroll(e) {
  var elem = $(e.currentTarget);

  if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
    $("#parallax").trigger("click");
  } else if (elem.scrollTop() == 0) {
    $("#parallax").trigger("click");
  }
}

$('div').on('scroll', chk_scroll);

function chk_scroll(e) {
  var elem = $(e.currentTarget);

  if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
    $("#parallax").trigger("click");
  } else if (elem.scrollTop() == 0) {
    $("#parallax").trigger("click");
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  background-color: #fedcc8;
}

.parallax {
  -webkit-perspective: 100px;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  margin-left: -1500px;
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
}

.parallax__cover {
  background: #2d112b;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1000px;
  z-index: 2;
}

.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
}

.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer__2 {
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
}

.parallax__layer__3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer__4 {
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
}

.parallax__layer__5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer__6 {
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<section id="parallax">
  <div style="height: 100vh">
    <div class="parallax">
      <div class="parallax__layer parallax__layer__0">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__1">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__2">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__3">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__4">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__5">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
      </div>
      <div class="parallax__layer parallax__layer__6">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
      </div>
      <div class="parallax__cover"></div>
    </div>
  </div>
</section>

<section>
  <v-col class="pa-5" cols="12" md="6">
    <span class="d-flex justify-center mb-5">
      Lorem ipsum dolor sit amet, consectetur adipi<br />
      scin elit. Etiam vulputate augue vel felis gravida<br />
      porta. Lorem ipsum dolor sit amet.
      Lorem ipsum dolor sit amet, consectetur adipi<br />
      scin elit. Etiam vulputate augue vel felis gravida<br />
      porta. Lorem ipsum dolor sit amet.
      Lorem ipsum dolor sit amet, consectetur adipi<br />
      scin elit. Etiam vulputate augue vel felis gravida<br />
      porta. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipi<br />
      scin elit. Etiam vulputate augue vel felis gravida<br />
      porta. Lorem ipsum dolor sit amet.
    </span>
    <span class="d-flex justify-center">
      Skills
    </span>

    <span class="d-flex justify-center mb-5">
      Lorem ipsum dolor sit amet, consecte tur adipi scin e<br />
      lit. Etiam vulputate augu e vel felis gravida porta.
    </span>
    <v-row>

    </v-row>
  </v-col>
</section>

Answer 2

这段代码有很好的滚动效果。我已参考 link 重做您的代码。希望对你有帮助。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  overflow: hidden;
  background-color: #fedcc8;
}

body {
  height: 500px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 100px;
  perspective: 100px;
  -webkit-perspective-origin-x: 100%;
  perspective-origin-x: 100%;
}

section {
  position: relative;
}

.cover {
  color: #fff;
  background: #2d112b;
  padding: 1rem;
}

.cover2 {
  padding: 1rem;
  background: #fedcc8;
}

.parallax__group {
  height: 500px;
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.parallax__layer {
  position: absolute;
  top: 0%;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform-origin-x: 100%;
  transform-origin-x: 100%;
}

.parallax__layer img {
  position: absolute;
  left: 50%;
  bottom: 0%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
  z-index: 1;
}

.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
  z-index: 2;
}

.parallax__layer__2 {
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
  z-index: 3;
}

.parallax__layer__3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
  z-index: 4;
}

.parallax__layer__4 {
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
  z-index: 5;
}

.parallax__layer__5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
  z-index: 6;
}

.parallax__layer__6 {
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
  z-index: 7;
}

<section class="parallax__group">
  <div class="parallax__layer parallax__layer__0">
    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
  </div>
  <div class="parallax__layer parallax__layer__1">
    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
  </div>
  <div class="parallax__layer parallax__layer__2">
    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
  </div>
  <div class="parallax__layer parallax__layer__3">
    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
  </div>
  <div class="parallax__layer parallax__layer__4">
    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
  </div>
  <div class="parallax__layer parallax__layer__5">
    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
  </div>
  <div class="parallax__layer parallax__layer__6">
    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
  </div>
</section>
<section class="parallax__group cover">
  <v-row>
    <v-col class="pa-5" cols="12" md="6">
      <span class="d-flex justify-center mb-5">
     Lorem ipsum dolor sit amet, consectetur adipi<br />
     scin elit. Etiam vulputate augue vel felis gravida<br />
     porta. Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consectetur adipi<br />
     scin elit. Etiam vulputate augue vel felis gravida<br />
     porta. Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consectetur adipi<br />
     scin elit. Etiam vulputate augue vel felis gravida<br />
     porta. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipi<br />
     scin elit. Etiam vulputate augue vel felis gravida<br />
     porta. Lorem ipsum dolor sit amet.
    </span>
      <span class="d-flex justify-center">
     Skills
    </span>
      <span class="d-flex justify-center mb-5">
     Lorem ipsum dolor sit amet, consecte tur adipi scin e<br />
     lit. Etiam vulputate augu e vel felis gravida porta.
    </span>
      <v-row>
      </v-row>
    </v-col>
  </v-row>
</section>
<section class="cover2">
  <v-row>
    <v-col class="pa-5" cols="12" md="6">
      <span class="d-flex justify-center mb-5">
     Lorem ipsum dolor sit amet, consectetur adipi<br />
     scin elit. Etiam vulputate augue vel felis gravida<br />
     porta. Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consectetur adipi<br />
     scin elit. Etiam vulputate augue vel felis gravida<br />
     porta. Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consectetur adipi<br />
     scin elit. Etiam vulputate augue vel felis gravida<br />
     porta. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipi<br />
     scin elit. Etiam vulputate augue vel felis gravida<br />
     porta. Lorem ipsum dolor sit amet.
    </span>
      <span class="d-flex justify-center">
     Skills
    </span>
      <span class="d-flex justify-center mb-5">
     Lorem ipsum dolor sit amet, consecte tur adipi scin e<br />
     lit. Etiam vulputate augu e vel felis gravida porta.
    </span>
      <v-row>
      </v-row>
    </v-col>
  </v-row>
</section>

Answer 3

您遇到的不是问题。您的示例有 2 个具有滚动条的不同元素，一个 with-in 另一个。 For-example 如果您查看此页面上的代码片段之一，您将遇到相同的行为。这是有意的。当您到达某个元素的底部时，您通常不想突然开始滚动主页。 Chrome 例如等待您执行另一个操作，例如移动鼠标或暂停足够长的时间，然后它让您滚动 parent 元素。

对于视差效果，您不需要多个 scroll-able 元素；你只需要一个。此外，您不需要所有这些额外的 div。这是我会怎么做...

html {
  overflow: hidden;
}

body {
  margin: 0;
  background-color: #fedcc8;
  height: 100vh;
  overflow-x: hidden;
  -webkit-perspective: 100px;
  perspective: 100px;
}

img {
  z-index: -1;
  position: absolute;
  left: calc(-1500px + 50vw);
  border-top: calc(100vh - 455px) solid transparent;
  bottom: 0;
}

.content {
  background: #2d112b;
  min-height: calc(100vh - 25px);
  margin-top: calc(100vh - 2px);
  padding: 25px;
}

.text-box {
  padding: 15px 25px;
  border-radius: 15px;
  background: #fedcc8;
  max-width: 800px;
  margin: 100px auto 0;
  font: italic small-caps bold 16px/2 cursive
}

.parallax-0 {
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
}

.parallax-1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
}

.parallax-2 {
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
}

.parallax-3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
}

.parallax-4 {
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
}

.parallax-5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
}

.parallax-6 {
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
}

<img class='parallax-0' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true'/>
<img class='parallax-1' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true'/>
<img class='parallax-2' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true' />
<img class='parallax-3' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true'/>
<img class='parallax-4' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true'/>
<img class='parallax-5' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true'/>
<img class='parallax-6' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true'/>
<div class='content'>
  <div class='text-box'>
    Lorem ipsum dolor sit amet, consectetur adipi scin elit. Etiam vulputate augue vel felis gravida porta. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipi scin elit. Etiam vulputate augue vel felis gravida porta. Lorem ipsum dolor
    sit amet. Lorem ipsum dolor sit amet, consectetur adipi scin elit. Etiam vulputate augue vel felis gravida porta. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipi porta. Lorem ipsum dolor sit amet.
  </div>
</div>

首先要设置 body 的视角，以便有视差。将 html 溢出设置为隐藏也很重要，因为默认情况下页面滚动条属于 html 元素。然后对于获得视差效果的元素，重要的是要确保正确获得 moved/scaled 以正确对齐。默认情况下，所有转换都基于中心点发生。您选择将图像放在屏幕大小的 div 内，并将图像与底部对齐，效果很好。为简单起见，在示例中，图像的顶部边框与屏幕大小相同，但仍位于底部。它们也是居中的，z-index 设置为 -1 以位于页面其余部分的后面，并且它们的底部设置为 0 以正确处理非常宽的屏幕（当边框为负时它什么都不做）。最后有一个 div 包含页面的其余部分。它有一个屏幕高度的顶部边距，以便为视差山脉留出空间（我减去 2px，因为我注意到它和手机上的山脉之间有一个奇怪的差距）。

如果你想让山脉从更高的地方开始，你可以像你一样把它们放在 divs 内，并在任何高度对齐它们，或者如果你不想添加 divs 你可以这样做...

/*__img__*/
border-top: calc(45vh - 455px / 2) solid transparent;
border-bottom: calc(55vh - 455px / 2) solid transparent;

/*__.content__*/
margin-top: min(100vh - 2px, 100vh + 455px / 2 - 2px);

要从这个例子中吸取的重要一点是你必须让滚动只发生在一个元素中。希望这有帮助。

Answer 4

由于您有两个滚动条，因此您描述的行为是预期的。您无法更改此行为。你可以做的是改变你的解决方案，使其符合预期的行为（即只出现一个滚动条而不是两个）。

您正在使用 perspective 和 translateZ 来创建视差效果。这意味着 "parallax-ed" 项目的容器必须具有 perspective 属性并且项目本身必须是容器的 直系后代 。在下面的解决方案中，我们将 perspective 属性设置为 body 元素。这意味着视差仅在滚动 body 元素时发生。不配置html元素的overflow，滚动会出现在html元素上；因此，必须将 html 元素的 overflow 属性设置为 hidden。这将导致滚动条出现在 body 元素上。

我的回答与非常相似。 然而， 我使用 background-image 和 background-position: center bottom 来使图像自动居中，而不管它的宽度（在你的解决方案中，你使用 margin-left: -1500px 去做这个）。使用此解决方案，您 不需要 知道图像的固有大小（原始大小），并且即使您稍后更改图像，图像也将始终居中。这比使用固定单位更灵活。巧合的是，这需要我使用 divs 并且这对你有利（因为你提到了在 Vue 中直接使用 img 的问题[请进一步查看到底是什么潜在问题；它可能不仅仅是由 div]).

引起的

此外，我使用top: 100%和position: relative对其进行调整，使内容位于图像的正下方。这是解决方案。

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  overflow: hidden;
}

body {
  overflow-x: hidden;
  background-color: #fedcc8;
  height: 100vh;
  -webkit-perspective: 100px;
  perspective: 100px;
}

div[class^="parallax__layer"] {
  position: absolute;
  bottom: 0;
  left: 0;
  width:100vw;
  height:100vh;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: center;
}

h1 {
  font-family: Helvetica;
  color: #fff;
  text-align: center;
}

.parallax__content {
  background: #2d112b;
  top: 100%;
  position: relative;
  padding: 200px 100px;
}

.parallax__layer--zero {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true');
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
}

.parallax__layer--one {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true');
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer--two {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true');
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
}

.parallax__layer--three {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true');
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer--four {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true');
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
}

.parallax__layer--five {
  background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true');
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer--six {
  background-image: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true');
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
}

<div class='parallax__layer--zero'></div>
<div class='parallax__layer--one'></div>
<div class='parallax__layer--two'></div>
<div class='parallax__layer--three'></div>
<div class='parallax__layer--four'></div>
<div class='parallax__layer--five'></div>
<div class='parallax__layer--six'></div>
<div class='parallax__content'>
  <h1>Hello y'all, this parallax works!</h1>
</div>

为什么不先移动鼠标就不能滚动通过我的视差？

Why can I not scroll past my parallax without moving the mouse first?

html

javascript

css

scrollbar

vue.js