Skip to content

Instantly share code, notes, and snippets.

@pedro-mass

pedro-mass/scroll-containers.js

Last active January 2, 2024 22:14
Show Gist options
  • Save pedro-mass/50c31c5bb6e874458791108de13ad5ab to your computer and use it in GitHub Desktop.
Save pedro-mass/50c31c5bb6e874458791108de13ad5ab to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. pedro-mass revised this gist Jan 2, 2024. 1 changed file with 10 additions and 1 deletion.
    11 changes: 10 additions & 1 deletion visually-hidden.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,10 @@
    ‎‎​
    .visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    }
  2. pedro-mass revised this gist Jan 2, 2024. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions visually-hidden.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​
  3. pedro-mass revised this gist Jan 2, 2024. 1 changed file with 30 additions and 1 deletion.
    31 changes: 30 additions & 1 deletion scroll-containers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,30 @@
    ‎‎​
    // Replace “.the-fixed-child” for a CSS selector
    // that matches the fixed-position element:
    const selector = ".fixed";

    function findCulprits(elem) {
    if (!elem) {
    throw new Error(`Could not find element with selector: "${selector}"`);
    }

    let parent = elem.parentElement;

    while (parent) {
    const { transform, willChange, filter } = getComputedStyle(parent);

    if (
    transform !== "none" ||
    willChange === "transform" ||
    filter !== "none"
    ) {
    console.warn("🚨 Found a culprit! 🚨\n", parent, {
    transform,
    willChange,
    filter,
    });
    }
    parent = parent.parentElement;
    }
    }

    findCulprits(document.querySelector(selector));
  4. pedro-mass revised this gist Jan 2, 2024. 1 changed file with 25 additions and 1 deletion.
    26 changes: 25 additions & 1 deletion sticky.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,25 @@
    ‎‎​
    // ref: https://courses.joshwcomeau.com/css-for-js/02-rendering-logic-2/17-troubleshooting

    // Replace “.the-sticky-child” for a CSS selector
    // that matches the sticky-position element:
    const selector = ".the-sticky-child";

    function findCulprits(elem) {
    if (!elem) {
    throw new Error("Could not find element with that selector");
    }

    let parent = elem.parentElement;

    while (parent) {
    const { overflow } = getComputedStyle(parent);

    if (["auto", "scroll", "hidden"].includes(overflow)) {
    console.log(overflow, parent);
    }

    parent = parent.parentElement;
    }
    }

    findCulprits(document.querySelector(selector));
  5. pedro-mass created this gist Jan 2, 2024.
    1 change: 1 addition & 0 deletions scroll-containers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​
    1 change: 1 addition & 0 deletions sticky.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​