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

Question

我正在制作一个 Web 应用程序，其中包含一个隐藏的侧边栏，该侧边栏从右侧移入。实现这一点最明显的方法是在父元素上使用overflow: hidden; 隐藏侧边栏，并使用css 转换为right 属性设置动画，使其在用户按下按钮时出现。

但是，我发现即使overflow: hidden; 禁用滚动条，用户也可以通过使用 Ctrl+F 或在侧边栏上的元素上切换到应该隐藏的元素将父元素滚动到侧边栏offscreen，在这个过程中将一些主应用程序推到屏幕外。

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

虽然这不是一个特别大的问题（只需再次切换侧边栏即可解决），但这显然是不可取的，我还没有找到处理它的好方法。

我可以使用 javascript 来侦听 transitionend 事件以在侧边栏上将 visibility 设置为 hidden 以便在侧边栏隐藏时无法选择文本，但用户仍然可以这样做当过渡发生时，无论如何都要滚动到屏幕外。

我还可以将所有文本放在伪元素中，并在所有可聚焦元素上添加tabindex="-1"，这样就没有什么可以选择的了，但这似乎超出了顶部，也很混乱，不允许用户使用 Ctrl+F 或侧边栏上的元素可见时使用标签，这是不可取的。

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

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

Answer 1

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

JSFiddle link

Answer 2

这是一个有趣的案例，我没有听说过或想过，它说“错误”确实有道理。我想问题是文本在屏幕外并隐藏，但仍然存在。我会将该 div 设置为 display:none，然后通过您的 javascript 切换更改此值，以便 div 变为： display:inline 然后拉出。

Answer 3

您可以检查元素是否在视口之外，然后在其上显示：无。

This 问题将有助于检查元素是否在视口之外。

Answer 4

使用另一个具有显示属性的类：无； -> 这样你就不能使用 tab/ctrl+F 了。

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);
}

这是小提琴：https://jsfiddle.net/j9d0e7ug/2/

请注意，我使用 setTimeout()，否则在块和无之间更改显示会破坏动画。还要考虑更快的转换:)