t-mart / kill-sticky Goto Github PK

(() => {
  document.querySelectorAll("body *").forEach(function (node) {
    if (["fixed", "sticky"].includes(getComputedStyle(node).position)) {
      node.parentNode.removeChild(node);
    }
  });

  document.querySelectorAll("html *").forEach(function (node) {
    var s = getComputedStyle(node);
    if ("hidden" === s["overflow"]) {
      node.style["overflow"] = "visible !important";
    }
    if ("hidden" === s["overflow-x"]) {
      node.style["overflow-x"] = "visible !important";
    }
    if ("hidden" === s["overflow-y"]) {
      node.style["overflow-y"] = "visible !important";
    }
  });

  var htmlNode = document.querySelector("html");
  htmlNode.style["overflow"] = "visible !important";
  htmlNode.style["overflow-x"] = "visible !important";
  htmlNode.style["overflow-y"] = "visible !important";

  document.querySelectorAll("body *").forEach(function (node) {
    var s = getComputedStyle(node);
    if ("hidden" === s["overflow"]) {
      node.style["overflow"] = "visible !important";
    }
    if ("hidden" === s["overflow-x"]) {
      node.style["overflow-x"] = "visible !important";
    }
    if ("hidden" === s["overflow-y"]) {
      node.style["overflow-y"] = "visible !important";
    }
  });

  var bodyNode = document.querySelector("body");
  bodyNode.style["overflow"] = "visible !important";
  bodyNode.style["overflow-x"] = "visible !important";
  bodyNode.style["overflow-y"] = "visible !important";

  // attach 10 classes to body: class1, class2, ..., class10

  const range10 = [...Array(10).keys()];
  range10.forEach((i) => {
    bodyNode.classList.add(`class${i + 1}`);
  });

  // attach 10 classes to html

  range10.forEach((i) => {
    htmlNode.classList.add(`class${i + 1}`);
  });

  // create a style component and style so any body with these classes inside an html with these classes will be overflow: visible !important

  const style = document.createElement("style");
  style.innerHTML = `
  html.class1.class2.class3.class4.class5.class6.class7.class8.class9.class10 body.class1.class2.class3.class4.class5.class6.class7.class8.class9.class10 {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: relative !important;
  }
`;
  document.head.appendChild(style);
})();