javascript - 为什么不先移动鼠标就无法滚动视差？

Question

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

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

首先，我建议添加 position: relative;在 .parallax为了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>