首页 / 技术问答 / Vue.js问答列表 / 问答详情

Vue.js 为什么不先移动鼠标就无法滚动视差

所以我试着做一个带有视差着陆图片的网页.为了让视差效果发挥作用，它的高度更高，因此用户必须向下滚动.这将在侧面仅为该视差创建第二个滚动条.到现在为止，一直都还不错.问题是当我向下滚动到视差的末尾时，第二个滚动条没有自动激活，我必须稍微移动鼠标才能继续滚动网页的正常内容.

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>

感谢您的帮助！

推荐答案

第一件事首先，我建议在.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>

Vue.js相关问答推荐

vue3中的转换可以在滑入但不能滑出时工作

Vuetify 3 v-radio-group 将模型设置为 null

Vue 3组合式API如何测试是否发出正确的事件

有没有办法将react 键作为值传递给由 v-for 创建的 v-model

Shopware 6，使用 vue-test-utils 进行Jest 测试：渲染模板上的意外行为

如何 for each 动态创建的按钮/文本字段设置唯一变量？

有什么理由不在 vue3 中使用