代码之家 › 专栏 › 技术社区 › BraedenP

在特定区域内滚动页面内容?

css html

BraedenP · 技术社区 · 15 年前

当用户滚动时,我希望所有的内容(除了固定的外部导航元素)都保持在中心元素的边界内。

下面是我的意思的快速模型:

我可以很容易地将center元素的overflow属性设置为auto,并保留所有内容。但是,滚动条不能出现在元素的边缘是非常重要的。

基本上,我想知道如何:

(也许我可以改变尺寸和尺寸身体元素的定位是外部的固定元件
使用时在div内 overflow:auto

1 回复 | 直到 6 年前

Pat 15 年前

如果可能的话,你应该把你的固定位置元素分成4个独立的部分(顶部,左侧,右侧和底部)。然后,只需确保将内容区域按其各自的宽度和高度填充到中心位置,这样内容就不会重叠:

HTML格式

<!-- 4 fixed position elements that will overlap your content -->
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>

<div id="content">
  <!-- Your content -->
</div>

CSS格式

html, body {
  height: 100%;   
}

#top, #left, #right, #bottom {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  background: red;
}

#top, #bottom {
  width: 100%;
  height: 20px;
}

#bottom {
  top: auto;
  bottom: 0;
}

#left, #right {
  height: 100%;
  width: 20px;
}

#right {
  left: auto;
  right: 0;
}

#content {
  position: relative;
  z-index: 1;
  padding: 25px; /* prevent content from being overlapped */
}

你可以看到 in action here .

如果您关心IE6/7支持,那么您需要添加一个 CSS expression fix 使固定位置在那些地方正常工作 令人惊叹的