Прокрутить содержимое страницы в определенной области?

Question

Я разрабатываю веб-сайт с фиксированными элементами по внешним краям макета с фиксированной шириной.Элемент div в центре зарезервирован для содержимого.

Когда пользователь выполняет прокрутку, я хочу, чтобы весь контент (кроме указанных фиксированных внешних навигационных элементов) оставался в пределах границ этого центрального элемента.

Вот краткий макет того, что я имею в виду: alt text http://i35.tinypic.com/15s3cax.png

Я мог бы очень легко установить свойство переполнения центрального элемента на auto и оставить все внутри.Тем не менее, очень важно, чтобы полоса прокрутки отсутствовала на краю этого элемента.

По сути, мне интересно, как:

• Ограничить содержимое этой областью (возможно, я мог бы изменить размер и расположение элемента тела - это разрешено? - и затем расположить фиксированные элементы вне тела.
• Скрыть полосу прокрутки, которая появляется внутри элемента div при использовании переполнения:auto

Любая помощь будет принята с благодарностью!

Answer 1

Если возможно, вы должны разбить элементы фиксированного положения на 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 */
}

Вы можете увидеть это в действии здесь .

Также обратите внимание на положение: относительно области содержимого. Это так, что z-index работает правильно, а содержимое отображается под фиксированными разделами.

Если вам нужна поддержка IE6 / 7, вам нужно добавить исправление CSS-выражения для правильной работы фиксированной позиции в этих потрясающих браузерах.