用CSS过渡隐藏元素离屏

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

但是，我发现尽管overflow: hidden;禁用了滚动条，用户仍然可以通过使用Ctrl + F或标签边栏上的元素将父元素滚动到侧边栏，同时它应该隐藏在屏幕外，在这个过程中推动了一些主要的应用程序。

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

虽然这不是一个特别大的问题（它可以通过只需再次切换侧边栏是固定的），这显然是不可取的，我还没有找到一个好办法来对付它。

我可以使用JavaScript来监听transitionend事件来设置visibility到hidden侧边栏上，这样的文本不能被选中时，侧边栏被隐藏，但用户仍然能够做到这一点，而转变正在发生并且无论如何滚动屏幕外。

我也可以把所有的文字放在伪元素中，并在所有可聚焦的元素上添加tabindex="-1"，这样就没有任何东西可以选择，但是看起来在顶部也很杂乱，不允许用户Ctrl + F或Tab当侧栏上的元素可见时，这是不理想的。

我也可以从左侧显示侧边栏而不是右侧，但我宁愿看看是否有更好的方式来完成此操作，而不是更改应用程序的整个设计。

道歉，如果这已在其他地方解决，但我已经四处搜索，没有发现任何问题。

来源

2015-07-21 MrInanimated

一种解决方案是将#Sidebarposition设置为fixed。并且还用transform: translateX()替换right来隐藏/显示它。

JSFiddle link

来源

2015-07-21 13:42:24 knitevision

谢谢，这工作正如我打算！我仍然需要在边栏隐藏的情况下添加'display：none'或'visibility：hidden'，以便用户不能选择任何内容。 – MrInanimated

同样的问题在屏幕外的菜单上工作。这救了我的命！ –

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

来源

2015-07-21 13:33:14 Patrick

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

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

来源

2015-07-21 13:34:48 Mintberry

使用另一个具有属性显示的类：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（），因为块和无之间以其他方式改变显示销毁动画。也考虑更快的转换:)

来源

2015-07-21 13:36:29 DekiChan

嗯，我仍然可以在转换过程中关闭主容器。我想我应该这样做的方式是设置更快的转换，而不用太担心。我只想问一下，在这种情况下，'visibility：hidden'和'display：none'是否有区别？目前我基本上是这样做的，除非我使用'transitionend'来监视侧边栏何时返回，并在其上设置'visibility：hidden'而不是'display：none'。 – MrInanimated

我不能回答更好：http://stackoverflow.com/a/133064/3062961 :) – DekiChan

用CSS过渡隐藏元素离屏

回答

相关问题