Last active
September 6, 2024 17:46
-
-
Save brandonjp/478cf6e32d90ab9cb2cd8cbb0799c7a7 to your computer and use it in GitHub Desktop.
find overflow:hidden ancestors
This file contains 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) | |
// & turns out if a parent is `display:flex` it might need some love | |
// (to remedy this you can set the `align-self` of your sticky element) | |
// see here for how the display & align-self properties affect: http://bit.ly/2ZaRu4o | |
// 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"; | |
} | |
function displayFlex(el) { | |
let display = getComputedStyle(el).display; | |
return display === "flex"; | |
} | |
let thisEl = element; | |
if (!initEl) console.log('** Overflow check commence!', thisEl); | |
let origEl = initEl || thisEl; | |
if (notVisible(thisEl)) console.warn("Overflow found on:", thisEl.tagName, { issue: "OVERFLOW IS NOT VISIBLE", tagName: thisEl.tagName, id: thisEl.id, class: thisEl.className, element: thisEl }); | |
if (displayFlex(thisEl)) console.warn("Flex found on:", thisEl.tagName, { issue: "DISPLAY IS FLEX", tagName: thisEl.tagName, id: thisEl.id, class: thisEl.className, element: thisEl }); | |
if (thisEl.parentElement) { | |
return findOverflowParents(thisEl.parentElement, origEl); | |
} else { | |
return console.log('** Overflow 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" |
Thank you so much!
Great! Thanks
It was such a great feeling to see my div stick for the first time after hours of time spent. All I needed was this beautiful script. THANK YOU!!!!!!
Thank you so much. Worked like butter!
What people said before! Awesome, thanks a lot!
Thank you, Brandon. I owe you.
Thank you!!! such a nice tool you made!
Amazing, thank you!
Nice stuff! 👍
Perfect, saved some time!
Thank you! I had to adjust my element:
align-self: start;
Because it had a grid parent.
You right here are a life saver, Arigato Gosaimas
This works thanks alot
Time saving tool! Thank you
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Brilliant! Works as intended.