Html 如何在没有浏览器仅扩展视口的情况下将元素推送到屏幕外？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10940689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to push an element outside the screen without the browser just expanding the viewport?
提问by Hubro
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)
有时，能够将东西滑出视口以隐藏它们是很好的，例如在制作可隐藏的侧边栏或面板时。但是当我将某些东西推过窗口的右边缘或下边缘时，浏览器（在我的例子中是 Chrome）会自动向它添加滚动条。用户现在可以滚动到我试图隐藏的元素。（JSFiddle 示例）
I can remove the scrollbars by setting overflow-x: hiddenon 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)
我可以通过overflow-x: hidden在 body 元素上设置来移除滚动条，但这会带来一系列其他副作用。例如，用户仍然可能会不小心点击并拖动屏幕边缘。用户现在可以看到“隐藏”元素，如果他们不知道浏览器是如何工作的，也可能会卡住。（JSFiddle 示例）
How can I achieve this "disappear off the screen" effect without experiencing these drawbacks?
如何在不遇到这些缺点的情况下实现这种“从屏幕上消失”的效果？
回答by Hubro
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: hiddenand the element should be pushed outside the edge of the wrapper instead of outside the edge of <body>.
我发现解决此问题的最佳方法是将元素放置在相同大小的不可见包装中。包装器应该具有overflow: hidden并且元素应该被推到包装器的边缘之外而不是 的边缘之外<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.
这个解决方案的诀窍是实际上没有任何东西离开屏幕，所以浏览器不会尝试增加视口大小来补偿。相反，包装器位于屏幕边缘，侧边栏位于其中。将包装器视为不透明贴图。
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.
还必须将包装器的大小调整为 0，以便它不会隐藏在文档顶部，并且可能会抓住不适合它的点击。
Here's an 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.
这是实践中解决方案的示例。我已经使用 jQuery 来操作 CSS，但是任何 JavaScript 库（或没有）都可以做到这一点。请注意，除非侧边栏包装器按比例缩小，否则“点击器”div 将无法点击。
$('.sidebar-inner').on('click', function() {
$(this).css('right', -250);
$(this).closest('.sidebar-outer').css('width', 0);
});
$('.clicker').on('click', function() {
alert('CLICKED!');
});body
{
background-color: red;
font: 12pt sans-serif;
}
.sidebar-outer
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 250px;
-webkit-transition: width 0.2s ease-out;
-moz-transition: width 0.2s ease-out;
transition: width 0.2s ease-out;
overflow: hidden;
z-index: 999;
}
.sidebar-inner
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 250px;
padding: 10px;
box-sizing: border-box;
-webkit-transition: right 0.2s ease-out;
-moz-transition: right 0.2s ease-out;
transition: right 0.2s ease-out;
background-color: cornflowerblue;
cursor: pointer;
}
.clicker
{
position: absolute;
width: 50px;
height: 50px;
top: 10px;
right: 10px;
padding: 10px;
background-color: green;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sidebar-outer">
<div class="sidebar-inner">
Click to hide
</div>
</div>
<div class="clicker">Click me!!</div>回答by Danield
A simple solution (admittedly not always viable) would be to set position:fixedon the sidebar instead of position:absolute.
一个简单的解决方案（诚然并不总是可行的）是position:fixed在侧边栏而不是position:absolute.
FIDDLE
小提琴
$('.sidebar').on('click', function() {
$(this).css('right', -250);
});.sidebar {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
width: 250px;
-webkit-transition: right 0.2s ease-out;
-moz-transition: right 0.2s ease-out;
transition: right 0.2s ease-out;
cursor: pointer;
background-color: cornflowerblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
Click to hide
</div>回答by gavin
That is a bad idea to wrap something invisible, because you should know why your will move it outside screen, it is not just for hidden, if just for hidden there will be a lot of good ways to do. To move outside the screen, the most benefit is when you deal with large picture,video,or other component like News Feed in iframe. That will cache render for it, make significante effective improvement.
包裹一些不可见的东西是一个坏主意，因为你应该知道为什么你会把它移到屏幕外，这不仅仅是为了隐藏，如果只是为了隐藏会有很多好方法。移到屏幕外，最大的好处是在 iframe 中处理大图片、视频或其他组件（如 News Feed）。这将为其缓存渲染，做出显着的有效改进。
