时间戳

首页 > 解决方案 > 用于取消修复滚动工具栏的脚本适用于 chrome 上的 tampermonkey，但不适用于 firefox 上的 greasmonkey

javascript - 用于取消修复滚动工具栏的脚本适用于 chrome 上的 tampermonkey，但不适用于 firefox 上的 greasmonkey

问题描述

我目前正在使用我在 github 上找到的脚本来“取消修复工具栏”（只是阻止 css 元素随页面滚动；不知道我是否使用了正确的术语）。它适用于 chrome 上的 tampermonkey（尽管脚本页面上有错误），但不适用于 Firefox 中的 greasmonkey。为什么它不适用于 Firefox 中的greasemonkey，我该如何解决？

// ==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);

标签： javascriptgreasemonkeytampermonkey

解决方案

它适用于 chrome 上的 tampermonkey（尽管脚本页面上有错误），但不适用于 Firefox 中的 greasmonkey。

在回答另一个脚本的查询时，我遇到了类似的问题（参考：[FireMonkey] Request YT' JS script ad blocker。

该脚本不声明变量，例如，这会在严格模式下fixed_items = [];破坏脚本。

这是重新编写的相同代码：（我没有测试过）

// ==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);

})();

推荐阅读