Styjun

Two (probably) equal real numbers which are not proved to be equal?

Why did Ham the Chimp push levers?

Exactly which act of bravery are Luke and Han awarded a medal for?

Is it a good idea to copy a trader when investing?

Is it possible to do moon sighting in advance for 5 years with 100% accuracy?

Magical Modulo Squares

History: Per Leviticus 19:27 would the apostles have had corner locks ala Hassidim today?

Trying to understand a summation

What should I use to get rid of some kind of weed in my onions

What's the difference between "ricochet" and "bounce"?

Why is the episode called "The Last of the Starks"?

For a Small race using a heavy weapon, does the Enlarge spell remove disadvantage on attacks with it?

Is there a reason why Turkey took the Balkan territories of the Ottoman Empire, instead of Greece or another of the Balkan states?

How would an instant or sorcery with an effect that targets work with Feather?

How can it be that ssh somename works, while nslookup somename does not?

logo selection for poster presentation

How long can fsck take on a 30 TB volume?

Why does this pattern in powers happen?

Why is it wrong to *implement* myself a known, published, widely believed to be secure crypto algorithm?

How to start your Starctaft II games vs AI immediatly?

Examples where existence is harder than evaluation

Does this website provide consistent translation into Wookiee?

Why did Missandei say this?

Visual Studio Code download existing code

How to fix window scroll event listener for firefox?

How to pass arguments to addEventListener listener function?How to find event listeners on a DOM node when debugging or from the JavaScript code?How to Check if element is visible after scrolling?JavaScript window resize eventHow to make a div 100% height of the browser window?How to trigger event in JavaScript?How to remove all listeners in an element?How to detect Safari, Chrome, IE, Firefox and Opera browser?How to fix Error: listen EADDRINUSE while using nodejs?CSS3 - Image Slideshow

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

3

1

• I have made a function which adds/removes classes to navigation depending upon window scroll position. https://kmanadkat.github.io/navonscroll/




• It is working in Chrome Desktop and Mobile, but it is failing for Firefox. Surprisingly, examples i mentioned on above website are working on firefox but not the home page.




• I have tried a lot to findout the bug, there is no console log from window.onscroll function . I want to keep this plugin in pure Vanilla Javascript , still i tried with arrow notations to see if they fix, but they didnot work.



• Everything is working in chrome, just firefox is not able to get along with window.onscroll,



• i even tried window.addEventListener("scroll", function() );, but it isn't working too, on tabs other than my website, i am able to do onscrollevents with developer tools.




• Here is the complete Code of plugin :

function hide_on_scroll(obj) 
 // Throw Error if input type is not object or navid is not passed
 if(typeof(obj)!=="object" 

• How i want to call it from html, the above code is from file navonscroll.js
  

 <script src="navonscroll.js"></script>
 <script>
 hide_on_scroll(
 nav_id: 'myscrolling_nav',
 hide_onscroll_mobile : true,
 nav_offset : 10
 );
 </script>

I hope someone could help me fix it directly on git and contribute for this opensource kind of plugin or some fix in stackoverflow would also helps.

javascript css addeventlistener onscrolllistener

share|improve this question

edited Mar 23 at 8:15

Jeto

7,40421224

asked Mar 23 at 7:43

Krupesh AnadkatKrupesh Anadkat

184

add a comment | 

3

1

• I have made a function which adds/removes classes to navigation depending upon window scroll position. https://kmanadkat.github.io/navonscroll/




• It is working in Chrome Desktop and Mobile, but it is failing for Firefox. Surprisingly, examples i mentioned on above website are working on firefox but not the home page.




• I have tried a lot to findout the bug, there is no console log from window.onscroll function . I want to keep this plugin in pure Vanilla Javascript , still i tried with arrow notations to see if they fix, but they didnot work.



• Everything is working in chrome, just firefox is not able to get along with window.onscroll,



• i even tried window.addEventListener("scroll", function() );, but it isn't working too, on tabs other than my website, i am able to do onscrollevents with developer tools.




• Here is the complete Code of plugin :

function hide_on_scroll(obj) 
 // Throw Error if input type is not object or navid is not passed
 if(typeof(obj)!=="object" 

• How i want to call it from html, the above code is from file navonscroll.js
  

 <script src="navonscroll.js"></script>
 <script>
 hide_on_scroll(
 nav_id: 'myscrolling_nav',
 hide_onscroll_mobile : true,
 nav_offset : 10
 );
 </script>

I hope someone could help me fix it directly on git and contribute for this opensource kind of plugin or some fix in stackoverflow would also helps.

javascript css addeventlistener onscrolllistener

share|improve this question

edited Mar 23 at 8:15

Jeto

7,40421224

asked Mar 23 at 7:43

Krupesh AnadkatKrupesh Anadkat

184

add a comment | 

• I have made a function which adds/removes classes to navigation depending upon window scroll position. https://kmanadkat.github.io/navonscroll/




• It is working in Chrome Desktop and Mobile, but it is failing for Firefox. Surprisingly, examples i mentioned on above website are working on firefox but not the home page.




• I have tried a lot to findout the bug, there is no console log from window.onscroll function . I want to keep this plugin in pure Vanilla Javascript , still i tried with arrow notations to see if they fix, but they didnot work.



• Everything is working in chrome, just firefox is not able to get along with window.onscroll,



• i even tried window.addEventListener("scroll", function() );, but it isn't working too, on tabs other than my website, i am able to do onscrollevents with developer tools.




• Here is the complete Code of plugin :

function hide_on_scroll(obj) 
 // Throw Error if input type is not object or navid is not passed
 if(typeof(obj)!=="object" 

• How i want to call it from html, the above code is from file navonscroll.js
  

 <script src="navonscroll.js"></script>
 <script>
 hide_on_scroll(
 nav_id: 'myscrolling_nav',
 hide_onscroll_mobile : true,
 nav_offset : 10
 );
 </script>

I hope someone could help me fix it directly on git and contribute for this opensource kind of plugin or some fix in stackoverflow would also helps.

javascript css addeventlistener onscrolllistener

share|improve this question

edited Mar 23 at 8:15

Jeto

7,40421224

asked Mar 23 at 7:43

Krupesh AnadkatKrupesh Anadkat

184

function hide_on_scroll(obj) 
 // Throw Error if input type is not object or navid is not passed
 if(typeof(obj)!=="object" 

 <script src="navonscroll.js"></script>
 <script>
 hide_on_scroll(
 nav_id: 'myscrolling_nav',
 hide_onscroll_mobile : true,
 nav_offset : 10
 );
 </script>

share|improve this question

edited Mar 23 at 8:15

Jeto

7,40421224

asked Mar 23 at 7:43

Krupesh AnadkatKrupesh Anadkat

184

share|improve this question

edited Mar 23 at 8:15

Jeto

7,40421224

asked Mar 23 at 7:43

Krupesh AnadkatKrupesh Anadkat

184

edited Mar 23 at 8:15

Jeto

7,40421224

edited Mar 23 at 8:15

Jeto

7,40421224

asked Mar 23 at 7:43

Krupesh AnadkatKrupesh Anadkat

184

asked Mar 23 at 7:43

Krupesh AnadkatKrupesh Anadkat

184

1 Answer
1

active

oldest

votes

1

This is apparently a CSS issue, so this is going to be an incomplete answer (it's not really my area), but it appears the window.scroll event is not fired at all on Firefox, due to a combination of:

• 
  scroll-behavior: smooth; on the html element,


• 
  height: 100vh; + overflow: auto; on the body element.

If you remove any of these rules from your main.css file, then the JS event will fire again.

Someone with more CSS expertise might understand what's going on and what is the most appropriate way to adjust these rules, even though that kinda seems like a Firefox bug to me.

share|improve this answer

edited Mar 23 at 8:16

answered Mar 23 at 8:11

JetoJeto

7,40421224

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thankyou so much Jeto, i will see removing those properties if possible. Yes it makes sense as example pages donot have these properties of css set and it is working there.
  
  – Krupesh Anadkat
  Mar 23 at 10:18
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  How did you figure out the css problem? It will help me in future.
  
  – Krupesh Anadkat
  Mar 23 at 10:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @KrupeshAnadkat I downloaded the page and played around with stuff (mostly removed scripts/CSS/etc) until window.scroll worked. Btw, you should accept the answer if it helped (little green tick on the left). Good luck!
  
  – Jeto
  Mar 23 at 10:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks i was just waiting for some other answers. But i resolved the issue just now, pushing it to github soon. Could you upvote my question, i am new in stackoverflow and need some points on reputation. Thanks
  
  – Krupesh Anadkat
  Mar 24 at 6:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's a decent question so I don't mind doing that :)
  
  – Jeto
  Mar 24 at 7:20
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55311700%2fhow-to-fix-window-scroll-event-listener-for-firefox%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

This is apparently a CSS issue, so this is going to be an incomplete answer (it's not really my area), but it appears the window.scroll event is not fired at all on Firefox, due to a combination of:

• 
  scroll-behavior: smooth; on the html element,


• 
  height: 100vh; + overflow: auto; on the body element.

If you remove any of these rules from your main.css file, then the JS event will fire again.

Someone with more CSS expertise might understand what's going on and what is the most appropriate way to adjust these rules, even though that kinda seems like a Firefox bug to me.

share|improve this answer

edited Mar 23 at 8:16

answered Mar 23 at 8:11

JetoJeto

7,40421224

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thankyou so much Jeto, i will see removing those properties if possible. Yes it makes sense as example pages donot have these properties of css set and it is working there.
  
  – Krupesh Anadkat
  Mar 23 at 10:18
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  How did you figure out the css problem? It will help me in future.
  
  – Krupesh Anadkat
  Mar 23 at 10:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @KrupeshAnadkat I downloaded the page and played around with stuff (mostly removed scripts/CSS/etc) until window.scroll worked. Btw, you should accept the answer if it helped (little green tick on the left). Good luck!
  
  – Jeto
  Mar 23 at 10:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks i was just waiting for some other answers. But i resolved the issue just now, pushing it to github soon. Could you upvote my question, i am new in stackoverflow and need some points on reputation. Thanks
  
  – Krupesh Anadkat
  Mar 24 at 6:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's a decent question so I don't mind doing that :)
  
  – Jeto
  Mar 24 at 7:20
  

  
  
  
  

add a comment | 

1

This is apparently a CSS issue, so this is going to be an incomplete answer (it's not really my area), but it appears the window.scroll event is not fired at all on Firefox, due to a combination of:

• 
  scroll-behavior: smooth; on the html element,


• 
  height: 100vh; + overflow: auto; on the body element.

If you remove any of these rules from your main.css file, then the JS event will fire again.

Someone with more CSS expertise might understand what's going on and what is the most appropriate way to adjust these rules, even though that kinda seems like a Firefox bug to me.

share|improve this answer

edited Mar 23 at 8:16

answered Mar 23 at 8:11

JetoJeto

7,40421224

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thankyou so much Jeto, i will see removing those properties if possible. Yes it makes sense as example pages donot have these properties of css set and it is working there.
  
  – Krupesh Anadkat
  Mar 23 at 10:18
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  How did you figure out the css problem? It will help me in future.
  
  – Krupesh Anadkat
  Mar 23 at 10:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @KrupeshAnadkat I downloaded the page and played around with stuff (mostly removed scripts/CSS/etc) until window.scroll worked. Btw, you should accept the answer if it helped (little green tick on the left). Good luck!
  
  – Jeto
  Mar 23 at 10:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks i was just waiting for some other answers. But i resolved the issue just now, pushing it to github soon. Could you upvote my question, i am new in stackoverflow and need some points on reputation. Thanks
  
  – Krupesh Anadkat
  Mar 24 at 6:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's a decent question so I don't mind doing that :)
  
  – Jeto
  Mar 24 at 7:20
  

  
  
  
  

add a comment | 

This is apparently a CSS issue, so this is going to be an incomplete answer (it's not really my area), but it appears the window.scroll event is not fired at all on Firefox, due to a combination of:

• 
  scroll-behavior: smooth; on the html element,


• 
  height: 100vh; + overflow: auto; on the body element.

If you remove any of these rules from your main.css file, then the JS event will fire again.

Someone with more CSS expertise might understand what's going on and what is the most appropriate way to adjust these rules, even though that kinda seems like a Firefox bug to me.

share|improve this answer

edited Mar 23 at 8:16

answered Mar 23 at 8:11

JetoJeto

7,40421224

share|improve this answer

edited Mar 23 at 8:16

answered Mar 23 at 8:11

JetoJeto

7,40421224

answered Mar 23 at 8:11

JetoJeto

7,40421224

answered Mar 23 at 8:11

JetoJeto

7,40421224