如何将元素推送到屏幕外面，而不需要浏览器扩展视口？ [英] How to push an element outside the screen without the browser just expanding the viewport?
问题描述
有些时候，能够将视口移出视口以隐藏它们是很好的，例如在制作可隐藏的侧边栏或面板时。但是当我将某些东西推过窗口的右边或底部边缘时，浏览器（我的情况下是Chrome）会自动向其中添加滚动条。用户现在可以滚动到我试图隐藏的元素。 （ JSFiddle示例）
Some times it's nice to be able to slide things out of the viewport to hide them, for example when making hide-able sidebars or panels. But when I push something past the right or bottom edge of the window, the browser (Chrome in my case) automatically adds scrollbars to it. The user can now scroll over to the element I tried to hide. (JSFiddle Example)
我可以通过设置删除滚动条 overflow-x：hidden 在body元素上，但打开了一堆其他副作用。例如，用户仍然可能无意中点击并拖动它们的方式越过屏幕的边缘。用户现在看到隐藏元素，并且如果他们不知道浏览器如何工作，也可能被卡住。 （ JSFiddle示例）
I can remove the scrollbars by setting overflow-x: hidden on the body element, but that opens up a bunch of other side effects. For instance, the user can still accidentally click&drag their way past the edge of the screen. The user now sees the "hidden" element and may also be stuck if they don't know how browsers work. (JSFiddle example)
如何实现此消失关闭屏幕效果，而没有遇到这些缺点？
How can I achieve this "disappear off the screen" effect without experiencing these drawbacks?
推荐答案
我找到解决这个问题的最好的方法是将元素在相同大小的不可见包装内。包装应该有 overflow：hidden ，并且元素应该被推到包装的边缘之外，而不是< body> 。
The best way I've found to solving this issue is to place the element inside an invisible wrapper of the same size. The wrapper should have overflow: hidden and the element should be pushed outside the edge of the wrapper instead of outside the edge of <body>.
这个解决方案的窍门是没有什么实际离开屏幕，所以浏览器不会尝试增加视口大小来补偿。相反，包装物搁置在屏幕的边缘上，侧边栏在其内部。将包装器视为不透明映射。
The trick of this solution is that nothing actually leaves the screen, so the browser doesn't try to increase the viewport size to compensate. Instead the wrapper rests on the edge of the screen and the sidebar is inside it. Think of the wrapper as an opacity map.
包装器也必须调整为0，以便它不会隐藏在文档的顶部，可能抓取
The wrapper also has to be resized down to 0 so that it won't lay invisible on top of the document and possibly grab clicks that wasn't meant for it.
以下是 JSFiddle示例。我使用jQuery来操纵CSS，但任何JavaScript库（或没有）会做的伎俩。请注意，除非侧栏封包缩小，否则clickerdiv将无法点击。
Here's a JSFiddle example of the solution in practice. I've used jQuery to manipulate the CSS, but any JavaScript library (or none) will do the trick. Notice that the "clicker" div wouldn't be clickable unless the sidebar wrapper is scaled down.
这篇关于如何将元素推送到屏幕外面，而不需要浏览器扩展视口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
