Script to unfix scrolling toolbars works in tampermonkey on chrome, but not in greasmonkey on firefox

Question

I'm currently using a script I found on github to "unfix toolbars" (just stops css elements from scrolling with page; don't know if I'm using correct terminology). It works with tampermonkey on chrome (albeit with errors on the script page), but not with greasmonkey in firefox. Why doesn't it work with greasemonkey in firefox, and how do I fix it?

// ==UserScript==
// @name        unfix-all-the-toolbars
// @description Removes "position: fixed" style from elements, unfixing "toolbars" and the such.
// @namespace   https://hasanyavuz.ozderya.net
// @include     *
// @version     1
// @grant       none
// ==/UserScript==


// Based on https://stackoverflow.com/questions/13696100/greasemonkey-script-to-make-fixed-positioned-elements-static
// and https://gist.github.com/vbuaraujo/bddb3b93a0b2b7e28e1b

fixed_items = [];

function unfixAll() {
  Array.forEach(
    document.querySelectorAll("h1, h2, ul, ol, li, div, nav, header, footer"),
    function (el) {
      var style = window.getComputedStyle(el);
      if (style.position === "fixed" && style.top == "0px" &&
          !(style.display === "none" || style.visibility === "hidden"))
          /* Avoid unfixing JavaScript popups like Twitter's "confirm retweet" window */
      {
        fixed_items.push(el);
        //el.style.position = "static";
        el.style.visibility = "hidden";
        /* I tried using "absolute" in the past, but this breaks WordPress's footer.
           Using "static" breaks it too, but at least it doesn't get in the way. */
      }
    });
}

function fixBack()
{
  Array.forEach(
    fixed_items,
    function(el) {
      //el.style.position = "fixed";
      el.style.visibility = "";
    }
  )
  fixed_items = [];
}

function onScroll()
{
  if (window.scrollY > 0)
  {
    unfixAll();
  }
  else
  {
    fixBack();
  }
}

window.addEventListener("scroll", onScroll);

erosman · Answer 1 · 2020-11-12T15:06:03.683

It works with tampermonkey on chrome (albeit with errors on the script page), but not with greasmonkey in firefox.

I came across a similar issue when answering a query on another script (ref: [FireMonkey] Request YT' JS script ad blocker.

The script does not declare variables e.g. fixed_items = []; and that breaks the script in strict mode.

Here is the same code re-written: (I have not tested it)

// ==UserScript==
// @name        unfix-all-the-toolbars
// @description Removes "position: fixed" style from elements, unfixing "toolbars" and the such.
// @namespace   https://hasanyavuz.ozderya.net
// @include     *
// @version     1
// @grant       none
// ==/UserScript==


// Based on https://stackoverflow.com/questions/13696100/greasemonkey-script-to-make-fixed-positioned-elements-static
// and https://gist.github.com/vbuaraujo/bddb3b93a0b2b7e28e1b

(() => { // anonymous function wrapper, for error checking & limiting scope

let fixed_els = [];

function unfixAll() {

  document.querySelectorAll('h1, h2, ul, ol, li, div, nav, header, footer').forEach(el => {

    const style = window.getComputedStyle(el);
    if (style.position === 'fixed' && style.top == '0px' &&
        !(style.display === 'none' || style.visibility === 'hidden')) {
      // Avoid unfixing JavaScript popups like Twitter's "confirm retweet" window
      fixed_els.push(el);
      el.style.visibility = 'hidden';
      /* I tried using "absolute" in the past, but this breaks WordPress's footer.
         Using "static" breaks it too, but at least it doesn't get in the way. */
    }
  });
}

function fixBack() {

  fixed_els.forEach(el => el.style.visibility = '');
  fixed_els = [];
}

function onScroll() {

  window.scrollY > 0 ? unfixAll() : fixBack();
}

window.addEventListener('scroll', onScroll);

})();

Script to unfix scrolling toolbars works in tampermonkey on chrome, but not in greasmonkey on firefox

1 Answers1