【发布时间】：2020-09-19 17:29:27
【问题描述】：
所以我正在尝试制作一个带有视差着陆图片的网页。要使视差效果起作用，它具有更高的高度，因此用户必须向下滚动。这只会在此视差的侧面创建第二个滚动条。到目前为止，一切都很好。问题是当我向下滚动到视差的末尾时，第二个滚动条没有自动激活，我必须稍微移动鼠标才能继续滚动网页的正常内容。 这是我的问题的一个工作示例：
有什么方法可以让它在到达视差末端后继续滚动而不先移动鼠标？
* {
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>感谢任何帮助！
【问题讨论】：
标签： javascript html css vue.js scrollbar