CSS Overflow: Hidden not working? Check the child element.
There are many cases where an issue arises and instead of considering all the options that could be causing the issue, we search for the elusive “fix”.
In doing so, the actual fix/solution is typically the last to be considered and only after countless articles and many refined searches — see StackOverflow or venture beyond page 9 search results for point-in-case.
A common example:
When activating a modal, a class is added to the body to keep the page from scrolling (applying css overflow: hidden). Straight forward. Works in browsers, but on mobile the page body still scrolls behind the modal background.
What is the cause?
In this case, the body tag has a child div acting as a content wrapper for the HTML (not sure why, I didn’t build the template). While the coding doesn’t seem logical, it doesn’t make it discountable.
What is the fix?
Start by opening the developer console and inspect what it is you are working with and/or against. In this case, the solution was as easy as targeting the body element as well as the child div content wrapper and applying css overflow: hidden styles to both.
Moral of the story:
Start at the foundation. Get a lay of the land (HTML). Then look at the pretty clouds (CSS) and underground (JS).
You are more likely to find a proper solution working from the ground up verses adding additional sets of research complexities and fixes based on theories or a hunch. (Search “how to prevent events on touch/mobile” for a great example of theory/hunch over-engineering).
Stack Overflow is a great resource for learning “what not to do”, sharing what “to do”, and generally a positive place for progression of all levels. Page 9 of search results… that’s just scary and best left for late night.
If you found this helpful, like > follow > share > comment.
CR Rollyson is a Digital User Experience & Web Manager for a S&P 500 Fintech company and is the COO of Side Role, a marketing team in Charlotte North Carolina partnering with In-house Teams & Agencies, Non-profits, and Start-Ups. Learn more about Side Role here.
