Hiding elements offscreen with CSS transitions

Question

I'm making a web app which contains a hidden sidebar which appears by moving in from the right. The most obvious way of achieving this is to hide the sidebar offscreen with overflow: hidden; on the parent element and use css transitions to animate the right property so that it appears when the user presses a button.

However, what I found was that even though overflow: hidden; disables scrollbars, the user is able to scroll the parent element to the sidebar by using Ctrl+F or tabbing to an element on the sidebar while it is supposed to be hidden offscreen, pushing some of the main app offscreen in the process.

Here's a JSFiddle I made to demonstrate the problem.

While this is not a particularly big problem (it can be fixed by just toggling the sidebar again) it is obviously undesirable and I haven't found a good way to deal with it.

I could use javascript to listen for transitionend events to set visibility to hidden on the sidebar so that the text can't be selected when the sidebar is hidden, but the user is still able to do this while the transition is happening and scroll offscreen anyway.

I could also put all the text in pseudoelements and add tabindex="-1" on all the focusable elements so that nothing is selectable, but that seems over the top and also quite messy, doesn't allow the user to Ctrl+F or tab to elements on the sidebar when it is visible, which is undesirable.

I could also have the sidebar appear in from the left instead of the right, but I'd rather see if there's a better way of doing this first than to change the entire design of the app.

Apologies if this has been addressed elsewhere, but I've searched around and not found anything that concerns my problem.

Answer 1

One solution is to set #Sidebar position to fixed. And also replace right with transform: translateX() to hide/show it.

JSFiddle link