0

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 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>

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...

Adit Lin
  • 17
  • 4
  • use removeEventListener – ControlAltDel Oct 03 '22 at 16:24
  • @ControlAltDel Hi, would you show me the codes from my codes above? :) – Adit Lin Oct 03 '22 at 16:26
  • Does this answer your question? [JavaScript: remove event listener](https://stackoverflow.com/questions/4402287/javascript-remove-event-listener) – Donald Duck Oct 03 '22 at 16:29
  • @DonaldDuck So the codes should lookalike this? else { scrollGallery.removeEventListener('scroll',containerTop); } So sorry but it doesn't work. – Adit Lin Oct 03 '22 at 16:32
  • @AditLin No, you need to name your function, and then pass the named function as a parameter to both `addEventListener` and `removeEventListener`. `addEventListener` and `removeEventListener` should be called on the same object with the same arguments. – Donald Duck Oct 03 '22 at 16:34
  • you should explain more what you want exactly. what do you mean by `the rocks moving and when #gallery section end it will stop the rocks from moving.` how are they moving right now .the page just scrolls? – UmairFarooq Oct 03 '22 at 18:27
  • @UmairFarooq I've updated my question, do you get it sir? :) – Adit Lin Oct 03 '22 at 18:30

2 Answers2

1

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);
ControlAltDel
  • 33,923
  • 10
  • 53
  • 80
  • Thanks for the answer! But I think I forgot to add the CSS too. I put #gallery with height: 200vh; With your codes, its stoped whenever I scroll it instantly. All I want is the scroll reached 200vh and then the AddEventListener stop adding the 'top'. Do you get it? :) – Adit Lin Oct 03 '22 at 17:13
  • 1
    @AditLin Okay I've updated my answer. If I understand correctly (and maybe I don't) this should be what you want – ControlAltDel Oct 03 '22 at 17:57
  • When its reached the height (200vh), the listener is still counting :( I've updated my question too. Hope you got what I mean! :) All I want is when its reached the height (bottom) of #gallery, its stop counting sir. I think it's almost there. After implement your codes, the rocks are still moving. I want to stop the rocks from moving after 200vh reached when scroll :) – Adit Lin Oct 03 '22 at 18:04
  • I've updated my question sir, hope you get it! Thank you! – Adit Lin Oct 03 '22 at 18:56
0

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.

What we don't want enter image description here

enter image description here

But Instead We Want to it be 0when bottom of the window touches the bottom of the div.so i am subtracting window.ScrollHeight again from my scrollVariable.

let chckScrl = winScrl - window.scrollY;

var scrollGallery;

let gallery = document.querySelector('#gallery');

window.addEventListener('scroll', function(el) {
  var containerTop = document.querySelector('#gallery').getBoundingClientRect().top;
  let winScrl = gallery.scrollHeight - window.scrollY;
  /*console.log(winScrl)*/
  let chckScrl = winScrl - window.scrollY;
  /*console.log(chckScrl)*/
  if (chckScrl > 0) {
    if (!scrollGallery) {
      $('.rock-1').css('top', (300 - (containerTop * .8)) + 'px');
      $('.rock-2').css('top', (200 - (containerTop * .6)) + 'px');
      $('.rock-3').css('top', (400 - (containerTop * .4)) + 'px');
      $('.rock-4').css('top', (500 - (containerTop * .5)) + 'px');
      $('.rock-5').css('top', (500 - (containerTop * .7)) + 'px');
      $('.rock-6').css('top', (400 - (containerTop * .7)) + 'px');
      $('.rock-7').css('top', (500 - (containerTop * .5)) + 'px');
      $('.rock-8').css('top', (200 - (containerTop * .2)) + 'px');
      $('.rock-9').css('top', (200 - (containerTop * .4)) + 'px');
    }
  }
  if (chckScrl < 0) {
    scrollGallery = 1;
  } else {
    scrollGallery = 0;
  }
});
#gallery {
  height: 200vh;
  background-color: cyan;
}

.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%;
}

#temp {
  height: 300vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  // this is another section
</section>

<section class="section-study-gallery" id="gallery"> // when user scroll from here, EventListener firing.
  <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 stop.
<section id="temp">
  // this is another section
</section>
General Grievance
  • 4,555
  • 31
  • 31
  • 45
UmairFarooq
  • 1,269
  • 1
  • 3
  • 8
  • @UmairFaroow Thanks for the effort and the complete answer Mr Umair. But when I implement it, the EventListener firing from the top of the window, not the top of the #gallery section. I think the trigger to stop is already correct, but the EventListener is still incorrect. If you put #temp from your codes to above #gallery section. its started from the top of window :) All I want to firing the EventListener start from #gallery section and stop when the #gallery's section end. But thank you for the answer, really appreciate it! – Adit Lin Oct 03 '22 at 20:29