为啥不先移动鼠标就无法滚动视差？

Posted

技术标签:

【中文标题】为啥不先移动鼠标就无法滚动视差？【英文标题】：Why can I not scroll past my parallax without moving the mouse first?为什么不先移动鼠标就无法滚动视差？ 【发布时间】：2020-09-19 17:29:27 【问题描述】：

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

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>

感谢任何帮助！

【问题讨论】：

【参考方案1】：

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

您遇到的问题是与浏览器相关的滚动问题，而不是您的代码问题（例如，它在 Firefox 上有效，但在 Chrome 上无效）。所以没有“修复”。

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

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

$('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>

【讨论】：

【参考方案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>

【讨论】：

起初看起来不错，但遗憾的是它只是工作，因为一切都在一个组件中，当我将它实现到我的网页中时，仍然有两个滚动条，并且在到达页面末尾后它不会继续滚动:// 那不是一般情况。这必须特定于您的平台，Vue js 对吗？我从来没有使用过Vue。但我有一种直觉，一些 js 脚本/css 在加载后会改变 DOM。这将产生一些看起来很糟糕的效果，就像你在那里看到的那样。一种调试方法是将浏览器内部的变化与上述代码进行比较。一定有什么不同。这将帮助您修复它。除此之外，如果没有你的整个代码，包括你正在使用的所有依赖项，我将无法帮助你。 我不认为 VueJs 是这里的问题，您的代码只包含一个大组件。我在它下面还有其他组件，所以不同的部分。而且它不会继续滚动这些部分。因此，我必须将所有内容都放在一个组件中，以使其像破坏 vue 所代表的一切一样工作：D 如果可能的话，您可以使用 scrimba.com 链接分享 vue 代码吗？我想我可以在不违反太多规则的情况下解决它。 因为了解您计划如何使用视差元素作为组件非常重要。【参考方案3】：

您遇到的不是问题。您的示例有 2 个具有滚动条的不同元素，一个包含在另一个元素中。例如，如果您查看此页面上的代码 sn-ps 之一，您将遇到相同的行为。这是有意的。当您到达一个元素的底部时，您通常不想突然开始滚动主页。例如，Chrome 会等待您执行其他操作，例如移动鼠标或暂停足够长的时间，然后让您滚动父元素。

对于视差效果，您不需要多个可滚动元素；你只需要一个。此外，您不需要所有这些额外的 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>

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

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

/*__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);

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

【讨论】：

这看起来相当不错，不幸的是如果我把它放在我的 vue 组件中，它不再显示图像，我还没有弄清楚为什么会这样。 如果我删除 标签周围的 div，图片将不再显示，知道这是怎么回事吗？ 如果你想不通，你总是可以把周围的 div 放回去。我对vue不太了解，似乎是一个奇怪的问题。一定要使用开发工具或其他工具检查样式，也许 vue 会稍微影响样式（再次对 vue 不太了解。）【参考方案4】：

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

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

我的回答与Dennis Ranish's answer 非常相似。 但是，我使用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>

【讨论】：

老实说，这可能是一个更好的方法。我确实注意到你的右边有一个小间隙（至少在我的电脑上）。这是因为无论滚动条如何，透视原点都位于中心。由于滚动条在不同设备上的大小不同，因此 translateX(-6px) 并不总是正确的。我确实发现您可以通过删除 translateX(-6px) 并将 parallax__layer 宽度设置为 100vw 而不是 100% 来解决此问题。 @DennisRanish 是的，谢谢你的提示，我不明白为什么我需要将translate 移动几个像素（即是什么导致div 稍微向左移动屏幕）。

以上是关于为啥不先移动鼠标就无法滚动视差？的主要内容，如果未能解决你的问题，请参考以下文章

滚动视差

为啥鼠标滑轮可以滚动div里面的内容，手机端手指滑动就不能滑动

html 视差上鼠标移动

电脑鼠标不能滑动怎么办

HTML5 3D 视差相册画廊

为啥鼠标不能超过电脑屏幕的左，上边界，而能够超过