使用 CSS 转换将元素隐藏在屏幕外

Question

我正在制作一个网络应用程序，其中包含一个隐藏的边栏，该边栏通过从右侧移入出现。实现这一点的最明显的方法是在父元素上使用 overflow: hidden; 将边栏隐藏在屏幕外，并使用 css 过渡动画 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

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

Answer 2

您可以检查元素是否在视口之外，然后 display:none 在其上。

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

Answer 3

使用另一个 class 将显示属性：none； -> 这样你就不能跳到 it/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);
}

这是 fiddle：https://jsfiddle.net/j9d0e7ug/2/

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

Answer 4

一种解决方案是将 #Sidebar position 设置为 fixed。并且还将 right 替换为 transform: translateX() 到 hide/show 它。

JSFiddle link

使用 CSS 转换将元素隐藏在屏幕外

Hiding elements offscreen with CSS transitions

html

javascript

css

overflow

css-transitions