-
-
Save gkielwasser/d50ceb8814d8ab20855bb27433666c83 to your computer and use it in GitHub Desktop.
find overflow:hidden ancestors
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // when you're trying to use `position:sticky` on an element | |
| // you'll have trouble if any parent/ancestor element has | |
| // overflow set to anything other than "visible" (such as: auto,hidden,overlay,scroll) | |
| // so, to find those troublesome parents... | |
| // copy & paste this into Chrome Inspector/Dev Tools console | |
| // (and be sure to change the #stickyElement below, if needed) | |
| function findOverflowParents(element, initEl) { | |
| function notVisible(el) { | |
| let overflow = getComputedStyle(el).overflow; | |
| return overflow !== = "visible"; | |
| } | |
| let thisEl = element; | |
| let origEl = initEl || thisEl; | |
| if (notVisible(thisEl)) console.warn("Overflow found on:", thisEl.tagName, '#' + thisEl.id, '.' + thisEl.className, thisEl); | |
| if (thisEl.parentElement) { | |
| return findOverflowParents(thisEl.parentElement, origEl); | |
| } else { | |
| return console.info('Overflow ancestor check complete! original element:', origEl); | |
| } | |
| } | |
| // to use a selector, change `#stickyElement` to your desired selector | |
| // findOverflowParents(document.querySelector('#stickyElement')); | |
| // or use $0 for the last element selected in the Chrome Inspector | |
| findOverflowParents($0); | |
| // *more learnings... | |
| // both `overflow-x` & `overflow-y` must === "visible" else sticky won't stick | |
| // for each of the possible settings of `overflow`, this is how they compute | |
| // (if "unset" is declared the getComputedStyle === "visible") | |
| // "auto" computes to "auto" *nosticky | |
| // "hidden" computes to "hidden" *nosticky | |
| // "inherit" computes to "visible" | |
| // "initial" computes to "visible" | |
| // "overlay" computes to "overlay" *nosticky | |
| // "scroll" computes to "scroll" *nosticky | |
| // "unset" computes to "visible" | |
| // "visible" computes to "visible" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment