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

Question

我正在制作一个网页应用程序，其中包含一个隐藏的侧边栏，从右侧移动即可显示。 实现这一目标最明显的方法是使用overflow: hidden;侧边栏overflow: hidden; 在父元素上，并使用css过渡来设置right属性的动画，以便在用户按下按钮时显示。

但是，我发现即使overflow: hidden; 禁用滚动条，用户可以使用Ctrl + F滚动父元素到侧边栏，或者在侧边栏上的元素上显示，同时它应该隐藏在屏幕外，在此过程中将一些主应用程序推到屏幕外。

这是我用来演示问题的JSFiddle。

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

我可以使用javascript来监听transitionend事件以设置hidden在侧边栏上的visibility以便在hidden侧边栏时无法选择文本，但是用户仍然可以在转换发生时执行此操作并且无论如何滚动屏幕。

我还可以将所有文本放在伪元素中，并在所有可聚焦元素上添加tabindex="-1" ，这样就没有任何东西可以选择了，但这似乎在顶部也很混乱，不允许用户按Ctrl + F或如果可见，则选项卡到侧栏上的元素，这是不合需要的。

我也可以从左侧而不是右侧看到侧边栏，但我宁愿看看是否有更好的方法来做到这一点，而不是更改应用程序的整个设计。

如果这已在其他地方得到解决，请道歉，但我已经四处寻找并且找不到任何与我的问题有关的事情。

Answer 1

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

JSFiddle链接

Answer 2

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

Answer 3

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

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

Answer 4

使用另一个具有属性display：none的类; - >那样你就无法选择它/ 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（），因为否则更改块和none之间的显示会破坏动画。 还考虑更快的转换:)