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

如果可能的话,你应该把你的固定位置元素分成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 使固定位置在那些地方正常工作 令人惊叹的