Recently when browsing YouTube on desktop, I subconciously caught myself thinking, “this feels.. suspiciously smooth”, when opening a pop-up or fly-out window.
Clearly that small, insignificant amount of page shift has become an expectation of these features and the lack of it caught my attention.
So, what’s the problem?
When implementing features of this nature, the traditional approach is to apply overflow: hidden to the body and call it a day.
Which is absolutely fine and does the job. It prevents the user from scrolling up or down the page when a pop-up or fly-out window is active.
However, this method has always had one drawback that lives rent free in the back of my mind, and comes to the forefront when I see it – that damn page shift. You see, this method simply removes the scroll bar in its entirety, leaving the space it left behind available to the page, which of course, fills it.
So, when you activate a pop-up or fly-out window the page’s width increases ever so slightly, giving text, images, video etc. an unsatisfying jolt.