Apparently if you set the height of the element you're overflow hidden'ing on, sticky will work. So something like:
#container {
overflow-x: hidden;
overflow-y: scroll;
height: 100vh; /* need to set this for child elements to be able to use display:sticky (c.f. https://github.com/w3c/csswg-drafts/issues/865) */
}
Just be careful with CSS and contain within something else overflow-x: hidden; as needed. Generic reset rules about body overflow just paper over cracks
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
How about adding an
overflow-x: hiddento the body?I'm up for that. Great idea!
Not a great idea! This'll kill
position: stickyfor all the child elements.Oooh good point!
The mental leap for that is a tough one for me. Why isn't my position: sticky; working?! Oh, because some parent element has hidden X overflow? 🤯
Yup. I completely forgot about that bugger. Definitely not helpful to be set as a global style in that context.
Finally I figure it out too :)
Apparently if you set the height of the element you're overflow hidden'ing on, sticky will work. So something like:
Just be careful with CSS and contain within something else overflow-x: hidden; as needed. Generic reset rules about body overflow just paper over cracks