Question

我右侧有一个侧边栏，一旦触发，就会从屏幕外弹出。我将它保存在body标记中，因为它需要始终与整个页面的高度相同，这在页面之间会有所不同。如果我向body overflow-x: hidden提供内容，则会将内容隐藏在较小的浏览器窗口中，并且不允许它们滚动。有没有办法解决这个问题？

我需要侧边栏滚动页面，因此我无法使用position: fixed

＆＃13;

html {
  height: 100%;
}
body {
  min-height: 100%;
  position: relative;
}
#sidebar {
  position: absolute;
  top: 0;
  right: -100px;
  width: 100px;
  height: 100%;
}

＆＃13;

<div id="sidebar"></div>

＆＃13;

这只是一个精简的例子。

Answer 1

一个简单的答案是将侧边栏放在position: absolute容器（.hideScroll）中overflow: hidden。

新父级被赋予视口的整个宽度和高度，并且不会影响正文滚动。

在此示例中，我使用了viewport percentage lengths (vh)而不是百分比高度。这些单位从视口获得高度，与任何父母无关。

实施例

将鼠标悬停在窗口中的正文上以触发侧边栏。

.hideScroll {
  overflow: hidden;
  position: absolute;
  height: 100vh;
  left: 0;
  top: 0;
  width: 100%
}
#sidebar {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100vh;
  background: #F00;
  right: -100px;
  transition: right 1s;
}
body {
  margin: 0;
  /*150 height is for the example to make the body scroll*/
  height: 150vh;
}
/*For example to show the sidebar on body hover*/

body:hover #sidebar {
  right: 0;
}

<div class="hideScroll">
  <div id="sidebar">Content</div>
</div>

Answer 2

添加display：none;到侧边栏：

#sidebar { display: none; position: absolute; top: 0; right: -100px; width: 100px; height: 100%; }

然后当您将其移动到主窗口时，设置display：block;在同一时间。

屏幕外的div为身体提供了一个水平滚动条

2 个答案:

实施例