Question

有时，能够将视频滑出视口以隐藏它们是很好的，例如在制作可隐藏的侧边栏或面板时。但是，当我将某些东西推过窗口的右边缘或底边时，浏览器（在我的情况下为Chrome）会自动添加滚动条。用户现在可以滚动到我试图隐藏的元素。（JSFiddle Example）

我可以通过在body元素上设置overflow-x: hidden来删除滚动条，但这会打开一堆其他副作用。例如，用户仍然可能意外地点击并拖过屏幕边缘。用户现在看到“隐藏”元素，如果他们不知道浏览器的工作方式，也可能会卡住。（JSFiddle example）

如何在不遇到这些缺点的情况下实现“消失屏幕”效果？

Answer 1

我发现解决此问题的最佳方法是将元素放在一个相同大小的隐形包装中。包装器应该有overflow: hidden，并且元素应该被推到包装器的边缘之外，而不是在<body>的边缘之外。

此解决方案的技巧是实际上没有任何内容离开屏幕，因此浏览器不会尝试增加视口大小以进行补偿。相反，包装器位于屏幕边缘，侧边栏位于屏幕边缘。将包装器视为不透明度图。

包装器也必须调整为0，以便它不会在文档顶部隐藏，并可能抓住不适合它的点击。

以下是实践中解决方案的一个示例。我已经使用jQuery来操作CSS，但任何JavaScript库（或者没有）都可以解决问题。请注意，除非缩小侧边栏包装，否则“clicker”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>

Answer 2

一个简单的解决方案（诚然不可行）就是在侧边栏上设置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>

Answer 3

包装不可见的东西是一个坏主意，因为你应该知道为什么你会将它移到屏幕之外，它不仅仅是为了隐藏，如果只是为了隐藏将会有很多好的方法。要移出屏幕，最大的好处是当您处理大图片，视频或其他组件（如iframe中的News Feed）时。这将缓存它的渲染，使有意义的有效改进。

如何在没有浏览器扩展视口的情况下将元素推送到屏幕外？

3 个答案:

FIDDLE