【发布时间】：2022-11-02 04:24:14
【问题描述】：
你能告诉我当 #gallery 的高度通过滚动达到时如何停止 EventListener 吗？我的意思是当它达到 200vh（或任何值）时，EventListener 停止计数。
所以#gallery 位于窗口的中间（许多部分的中间部分）。 #gallery 部分上方和下方还有其他部分。我只想触发用户开始滚动来自#gallery 部分，岩石通过滚动和何时移动#画廊部分结束或达到高度（200vh 或其他），它将阻止岩石移动。
我几乎到那里完成我的视差事情。
这是我的代码
<style>
#gallery
{
height: 200vh
}
.rocks
{
position: absolute;
transition: all 0.3s;
}
.rock-1 {
width: 100px;
height: 100px;
left: 10%;
top: 100px;
}
.rock-2 {
width: 120px;
height: 120px;
left: 20%;
top: 120px;
}
.rock-3 {
width: 80px;
height: 80px;
left: 10%;
top: 80px;
}
.rock-4 {
width: 130px;
height: 130px;
top: 130px;
left: 31%;
}
.rock-5 {
width: 110px;
height: 110px;
top: 110px;
left: 5%;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.rock-6 {
width: 70px;
height: 70px;
top: 70px;
left: 20%;
}
.rock-7 {
width: 120px;
height: 120px;
top: 35%;
left: 120px;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.rock-8 {
width: 50px;
height: 50px;
top: 50px;
left: 25%;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.rock-9 {
width: 70px;
height: 70px;
top: 70px;
left: 30%;
}
</style>
<section>
// this is another section
</section>
<section class="section-study-gallery" id="gallery"> // when user scroll from here, EventListener firing and the rocks moving by scrolling.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="gallery-container">
<img class="rock-1 rocks" src="https://i.imgur.com/yIbmDYw.png" alt="rock"/>
<img class="rock-2 rocks" src="https://i.imgur.com/MZutMpv.png" alt="rock"/>
<img class="rock-3 rocks" src="https://i.imgur.com/AZumOFI.png" alt="rock"/>
<img class="rock-4 rocks" src="https://i.imgur.com/yIbmDYw.png" alt="rock"/>
<img class="rock-5 rocks" src="https://i.imgur.com/MZutMpv.png" alt="rock"/>
<img class="rock-6 rocks" src="https://i.imgur.com/MZutMpv.png" alt="rock"/>
<img class="rock-7 rocks" src="https://i.imgur.com/AZumOFI.png" alt="rock"/>
<img class="rock-8 rocks" src="https://i.imgur.com/yIbmDYw.png" alt="rock"/>
<img class="rock-9 rocks" src="https://i.imgur.com/yIbmDYw.png" alt="rock"/>
</div>
</div>
</div>
</div>
</section> // When section end, EventListener should stop firing and the rocks stop moving.
<section>
// this is another section
</section>
<script>
var scrollFunc = function(e){
var containerTop = document.querySelector('#gallery').getBoundingClientRect().top;
if (containerTop <= 0) {
if (!scrollGallery) {
$('.rock-1').css('top',(400-(containerTop*.8))+'px');
$('.rock-2').css('top',(200-(containerTop*.6))+'px');
$('.rock-3').css('top',(500-(containerTop*.4))+'px');
$('.rock-4').css('top',(600-(containerTop*.5))+'px');
$('.rock-5').css('top',(600-(containerTop*.7))+'px');
$('.rock-6').css('top',(400-(containerTop*.7))+'px');
$('.rock-7').css('top',(600-(containerTop*.5))+'px');
$('.rock-8').css('top',(200-(containerTop*.2))+'px');
$('.rock-9').css('top',(200-(containerTop*.4))+'px');
}
}
if (containerTop > 0) {
scrollGallery = 0;
}
if (window.scrolly > window.innerHeight * 2) {
window.removeEventListener('scroll', scrollFunc);
}
};
window.addEventListener('scroll',scrollFunc);
</script>
我是 Javascript 新手，如果这个愚蠢的问题困扰您，我很抱歉。 我真的很感激，谢谢！
更新
我已将我的代码更新为“ControlAltDel”代码。但是当#gallery 部分结束时，岩石仍在移动。它仍在移动到页脚部分。估计快到了……
【问题讨论】：
-
使用 removeEventListener
-
@ControlAltDel嗨，你能告诉我上面代码中的代码吗？ :)
-
这回答了你的问题了吗？ JavaScript: remove event listener
-
@DonaldDuck所以代码应该看起来像这样？否则 { scrollGallery.removeEventListener('scroll',containerTop);很抱歉，但它不起作用。
-
@AditLin 不，您需要命名您的函数，然后将命名函数作为参数传递给
addEventListener和removeEventListener。addEventListener和removeEventListener应该在具有相同参数的同一个对象上调用。
标签： javascript html