# Controlling the scroll eventlistener
**URL:** https://forum.kirupa.com/t/controlling-the-scroll-eventlistener/635415
**Category:** web dev
**Created:** [October 15, 2016, 7:34pm UTC](https://forum.kirupa.com/t/controlling-the-scroll-eventlistener/635415 "2016-10-15T19:34:16Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@bstagy](https://forum.kirupa.com/u/bstagy)
#### Post date: [October 15, 2016, 7:34pm UTC](https://forum.kirupa.com/t/controlling-the-scroll-eventlistener/635415/1 "2016-10-15T19:34:16Z")
Hello.
I’m trying to control a ‘scroll’ eventlistener and I added some conditionals within the function it’s calling. But I’m not having success. It’s actually harder than I originally thought it would be to do this.
Any advice? Thanks!
~B
[fx.js](https://forum.kirupa.com/uploads/short-url/XoUYORDsXZGiBlvmQe2THBnAp8.js) (1.1 KB)
---
### Author:  [@bstagy](https://forum.kirupa.com/u/bstagy)
#### Post date: [October 15, 2016, 7:52pm UTC](https://forum.kirupa.com/t/controlling-the-scroll-eventlistener/635415/2 "2016-10-15T19:52:12Z")
I made it work. But, I’m sure there’s a better way to do this.
[fx.js](https://forum.kirupa.com/uploads/short-url/1Fa8vEWXMcHyer0I9NQRBwAJWRJ.js) (1.1 KB)
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 16, 2016, 3:40am UTC](https://forum.kirupa.com/t/controlling-the-scroll-eventlistener/635415/3 "2016-10-16T03:40:25Z")
The JS file shows up as a blank document when I try to click it. Can you post the relevant sections of code in the response? You can click on the \ button to format your code as…code! 😛
---
### Author:  [@bstagy](https://forum.kirupa.com/u/bstagy)
#### Post date: [October 16, 2016, 4:32am UTC](https://forum.kirupa.com/t/controlling-the-scroll-eventlistener/635415/4 "2016-10-16T04:32:27Z")
Hi Kirupa. Thank you!
`indent preformatted text by 4 spaces`
```auto
var qs = function(selector)
{
return document.querySelector(selector);
}
// This specificity was an attempt to prevent the nested tag from scaling
// along with the /header class="heads" tag
var head = qs('.wrapper > .heads');
//console.log("add event listener");
window.addEventListener('scroll',stop, true);
function stop()
{
if(scrollY <= 1)
{
//console.log("attempting to remove event listener");
window.removeEventListener('scroll',stop, true);
//console.log("adding the animDown()");
window.requestAnimationFrame(animDown);
window.addEventListener('scroll',stop, true);
}
else if(scrollY < 20)
{
//console.log("adding the animUp()");
window.requestAnimationFrame(animUp);
}
}
var animUp = function()
{
//console.log("running animUp!");
head.animate(
[
{
opacity: 0,
transform:"none",
backgroundColor:"#d2e59e"
},
{
opacity: 1,
transform:"scaleY(4)",
backgroundColor: "red"
}
],
{
duration: 1000,
easing: "ease-in-out",
fill:"both"
});
}
var animDown = function()
{
//console.log("running animDown!");
head.animate(
[
{
opacity: 1,
transform:"scaleY(4)",
backgroundColor: "red"
},
{
opacity: 0,
transform:"none",
backgroundColor:"#d2e59e"
}
],
{
duration: 400,
easing: "ease-in-out",
fill:"both"
});
}
```
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 17, 2016, 5:18pm UTC](https://forum.kirupa.com/t/controlling-the-scroll-eventlistener/635415/5 "2016-10-17T17:18:24Z")
Do you have a live version of this by any chance? From the code, you are going to be running two animations depending on whether you’ve scrolled \<=1 pixel or whether you’ve scrolled \< 20 pixels. What I am not sure about is how many times the browser will call the `animUp` and `animDown`. The expected answer should just be 1 🙂
🍔
---
### Author:  [@bstagy](https://forum.kirupa.com/u/bstagy)
#### Post date: [October 17, 2016, 7:57pm UTC](https://forum.kirupa.com/t/controlling-the-scroll-eventlistener/635415/6 "2016-10-17T19:57:52Z")
Hi Kirupa. That’s the ideal implementation. But, no it’s calling the code each and every scroll event which is not ideal I know. The site is local & done in notepad++. I’m a purist ; )
[https://drive.google.com/open?id=0B4Nz3Ll115dud2Zza0w3bDRsSXM](https://drive.google.com/open?id=0B4Nz3Ll115dud2Zza0w3bDRsSXM)
Thank you!
Brad
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 18, 2016, 4:30am UTC](https://forum.kirupa.com/t/controlling-the-scroll-eventlistener/635415/7 "2016-10-18T04:30:44Z")
Ah! One way of preventing the code from running the animation multiple times is by using a variable to act as a signal. If that variable is set to **true** , your animation code will not run more than once. If that variable were to be set to **false** , your animation code will run. As part of your animation code running, its variable will be set to **true** to avoid it from running again. I should warn you that I haven’t tested the following code snippet - only created it on the fly to highlight how it might work 😛
```
var qs = function(selector) {
return document.querySelector(selector);
}
// This specificity was an attempt to prevent the nested tag from scaling
// along with the /header class="heads" tag
var head = qs('.wrapper > .heads');
//console.log("add event listener");
window.addEventListener('scroll', stop, true);
var animDownPaused = true;
var animUpPaused = true;
function stop() {
if (scrollY <= 1) {
//console.log("attempting to remove event listener");
window.removeEventListener('scroll', stop, true);
//console.log("adding the animDown()");
window.requestAnimationFrame(animDown);
window.addEventListener('scroll', stop, true);
} else {
animDownPaused = true;
}
if (scrollY < 20) {
//console.log("adding the animUp()");
window.requestAnimationFrame(animUp);
} else {
animUpPaused = true;
}
}
var animUp = function() {
//console.log("running animUp!");
if (animUpPaused) {
animUpPaused = false;
head.animate(
[{
opacity: 0,
transform: "none",
backgroundColor: "#d2e59e"
}, {
opacity: 1,
transform: "scaleY(4)",
backgroundColor: "red"
}], {
duration: 1000,
easing: "ease-in-out",
fill: "both"
});
}
}
var animDown = function() {
//console.log("running animDown!");
if (animDownPaused) {
animDownPaused = false;
head.animate(
[{
opacity: 1,
transform: "scaleY(4)",
backgroundColor: "red"
}, {
opacity: 0,
transform: "none",
backgroundColor: "#d2e59e"
}], {
duration: 400,
easing: "ease-in-out",
fill: "both"
});
}
}
```
Notice how I am using the `animDownPaused` and `animUpPaused` variables to act as the mechanism I described to prevent your code from running the animation more than once when you are scrolling under 20 pixels or 1 pixel 🙂
Does this help?