javascript - 使用 CSS 过渡将元素隐藏在屏幕外

Question

我正在制作一个网络应用程序，其中包含一个隐藏的边栏，该边栏通过从右侧移入而出现。实现此目的最明显的方法是在父元素上使用 overflow: hidden; 将侧边栏隐藏在屏幕外，并使用 css transitions 为 right 属性设置动画，以便它在出现时显示用户按下按钮。

但是，我发现即使 overflow: hidden; 禁用了滚动条，用户仍可以使用 Ctrl+F 或按 Tab 键滚动到侧边栏上的元素侧边栏，虽然它应该隐藏在屏幕外，但在此过程中将一些主要应用程序推到屏幕外。

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

虽然这不是一个特别大的问题(可以通过再次切换侧边栏来解决)，但显然是不可取的，我还没有找到处理它的好方法。

我可以使用 javascript 监听 transitionend 事件，将侧边栏上的 visibility 设置为 hidden，这样就无法选择文本当侧边栏被隐藏时，但用户仍然可以在过渡发生时执行此操作，并且无论如何都可以滚动到屏幕外。

我还可以将所有文本放在伪元素中，并在所有可聚焦元素上添加 tabindex="-1"，这样就没有什么是可选的，但这看起来有点过头而且也很乱，不是吗' 允许用户在侧边栏上的元素可见时按 Ctrl+F 或 Tab 键，这是不可取的。

我也可以让侧边栏出现在左侧而不是右侧，但我宁愿先看看是否有更好的方法，而不是更改应用的整个设计。

如果此问题已在其他地方得到解决，我深表歉意，但我已经四处搜索，但没有发现任何与我的问题有关的内容。

Answer 1

一种解决方案是将#Sidebar position 设置为fixed。并将 right 替换为 transform: translateX() 以隐藏/显示它。

JSFiddle link