16

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

我可以通过设置 body 元素来移除滚动条overflow-x: hidden，但这会带来很多其他副作用。例如，用户仍然可能不小心点击并拖动到屏幕边缘。用户现在看到了“隐藏”元素，如果他们不知道浏览器是如何工作的，也可能会被卡住。（JSFiddle 示例）

如何在不遇到这些弊端的情况下实现这种“消失在屏幕外”的效果？

4

3 回答 3

20

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

这个解决方案的诀窍是实际上没有任何东西离开屏幕，因此浏览器不会尝试增加视口大小来补偿。相反，包装器位于屏幕边缘，侧边栏位于其中。将包装器视为不透明贴图。

包装器还必须调整为 0，这样它就不会在文档顶部不可见，并且可能会抓取不适合它的点击。

这是实践中解决方案的示例。我使用 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>

于 2012-06-07T22:24:03.240 回答
6

一个简单的解决方案（诚然并不总是可行）是设置position:fixed在侧边栏而不是position:absolute.

小提琴

$('.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>

于 2015-04-15T08:45:24.760 回答
0

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

于 2014-01-02T08:46:18.633 回答