How to stop EventListener when height reached?-CodePudding

Would you tell me how to stop EventListener when #gallery 's height reached by scrolling. I mean when its reached 200vh (or whatever the value is), the EventListener stop counting.

So the #gallery is in the middle of window (middle section of many section). There are other section above and below #gallery section. I just want to trigger when user start scroll from #gallery section, the rocks moving by scrolling and when #gallery section end or reached the height (200vh or whatever it is) it will stop the rocks from moving.

I almost get there to finish my parralax things.

Here's my codes

<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  id="gallery"> // when user scroll from here, EventListener firing and the rocks moving by scrolling.
    <div >
        <div >
            <div >
                <div >
                    <img  src="https://i.imgur.com/yIbmDYw.png" alt="rock"/>
                    <img  src="https://i.imgur.com/MZutMpv.png" alt="rock"/>
                    <img  src="https://i.imgur.com/AZumOFI.png" alt="rock"/>
                    <img  src="https://i.imgur.com/yIbmDYw.png" alt="rock"/>
                    <img  src="https://i.imgur.com/MZutMpv.png" alt="rock"/>
                    <img  src="https://i.imgur.com/MZutMpv.png" alt="rock"/>
                    <img  src="https://i.imgur.com/AZumOFI.png" alt="rock"/>
                    <img  src="https://i.imgur.com/yIbmDYw.png" alt="rock"/>
                    <img  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>

I'm new in Javascript, so sorry if this stupid question bothering you. I really appreciate it, thank you!

Update

I've updated my codes to "ControlAltDel" codes. But the rocks are still moving when #gallery section end. It's still moving till footer section. It's almost there I guess...

CodePudding user response：

I have "unanonyminized" your function, but you could probably do it with window.removeEventListener('scroll', this) using your existing code

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;
      // I think this is what you want, or?
    } 
    if (window.scrolly > window.innerHeight * 2) {
        // This is where you want this function to stop working, right?
        window.removeEventListener('scroll', scrollFunc);
    }
};
window.addEventListener('scroll',scrollFunc);

CodePudding user response：

Lets Hope This Makes Sense..

let winScrl = gallery.scrollHeight - window.scrollY; this gives us the position of scroll inside.meaning this will be equal to zero when top of my window touches the bottom of the div.

Which we dont want