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

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

JSFiddle link

Answer 2

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

Answer 3

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

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

Answer 4

使用另一个具有属性display：none的类; - ＆GT;那样你就无法选择它/ 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);
}

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

请注意，我使用setTimeout（），因为否则更改块和none之间的显示会破坏动画。还要考虑更快的转换：）

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

4 个答案: