在特定区域内滚动页面内容？ [英] Scroll page content within specific area?

问题描述

我设计的网站在固定宽度布局的外边缘上有固定元素。

I'm designing a website which has fixed elements on the outer edges of a fixed-width layout. A div in the center is reserved for the content.

当用户滚动时，我想要所有的内容（除了固定的外部导航元素之外）保持在边框内

When the user scrolls, I want all of the content (besides said fixed outer navigation elements) to stay within the borders of that center element.

这里是一个快速模型我的意思：

Here's a quick mockup of what I mean:

我可以很容易地将中心元素的overflow属性设置为auto，并保留所有内容。但是，非常重要的是，滚动条不存在于该元素的边缘。

I could very easily set the overflow property of the center element to auto, and have everything remain inside. However, it's very important that a scroll bar not be present on the edge of that element.

基本上，我想知道如何：

Basically, I'm wondering how to either:

• 限制该区域的内容
  （也许我可以改变body元素的大小和
  的位置 - 是
  允许？ - 然后将
  定位在
  体之外的固定元素。


• 使用$时隐藏出现的滚动条
  b $ b overflow：auto

任何帮助都将非常感谢！

Any help would be greatly appreciated!

推荐答案

如果可能，你应该将你的固定位置元素分成4个独立的部分（上，左，右和下），然后确保你以你各自的宽度和高度，因此内容不会重叠：

If possible, you should break your fixed position elements up into 4 separate sections (top, left, right and bottom). Then just make sure you pad you centre content area by their respective widths and heights so the content doesn't get overlapped:

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 。

还要注意position：relative内容区域。这是所以z-index正确工作，内容显示在固定部分的下面。

Also note the position: relative on the content area. This is so z-index works correctly and the content is displayed below the fixed sections.

如果你关心IE6 / 7支持，你需要添加一个< a href =http://annevankesteren.nl/test/examples/ie/position-fixed.html =nofollow noreferrer> CSS表达式修复，以使固定位置在这些真棒中正常工作浏览器。

If you care about IE6/7 support, you'll need to add a CSS expression fix to get fixed position working properly in those awesome browsers.

这篇关于在特定区域内滚动页面内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！