Hiding offscreen elements with CSS transitions
I am creating a web app that contains a hidden sidebar that appears by navigating to the right. The most obvious way to achieve this is to hide the sidebar from the screen overflow: hidden;
in the parent and use css transitions to animate the property right
so that it appears when the user clicks the button.
However, I found that even if overflow: hidden;
the scrollbars are turned off, the user can scroll the parent element in the sidebar using Ctrl + F or tab to the element in the sidebar, while it should be hidden off-screen by clicking some of the main apps outside screen in progress.
Here's a JSFiddle I made to demonstrate the problem.
While this is not a particularly big problem (it can be fixed by simply switching the sidebar again), it is clearly undesirable and I haven't found a good way to deal with it.
I could use javascript to listen for events transitionend
to set visibility
to hidden
on the sidebar so that no text can be selected when the sidebar is hidden, but the user can still do this while the transition is in progress and scrolls off-screen anyway.
I could also put all the text in pseudo-elements and add tabindex="-1"
to all focusable elements so that nothing is selected, but this seems to be from the top and also quite messy, does not allow the user to Ctrl + F or tab to items on the sidebar when visible. which is undesirable.
I could also include the sidebar on the left instead of the right, but I would rather if there is a better way to do this first than to change the whole design of the application.
Sorry if this has been addressed elsewhere, but I searched around and didn't find anything that addressed my problem.
source to share
This is an interesting case that I have not heard of and did not think that "error" makes sense. I guess the problem is that the text is off-screen and hidden, but still present. I would set this div to display: none and then change that value with a javascript toggle so that the div becomes: display: inline and then pulled.
source to share
You can check if the element is outside of the viewport and then display: none on it.
This question will help you check if the element is outside the viewport.
source to share
Use another class that will display properties: none; -> this way you won't be able to tab / ctrl + F it.
CSS
#Sidebar {
...
display: none;
}
#Sidebar.block {
display: block;
}
JavaScript:
if (sidebar.classList.contains("open")) {
sidebar.classList.remove("open");
setTimeout(function() {
sidebar.classList.remove("block");
}, 3500); // consider faster transitions!
} else {
sidebar.classList.add("block");
setTimeout(function() {
sidebar.classList.add("open");
}, 50);
}
Here's the fiddle: https://jsfiddle.net/j9d0e7ug/2/
Note that I am using setTimeout () because otherwise changing the display between the block and nothing destroys the animation. Let's also consider faster transitions :)
source to share