Избранная строка PowerShell подобна, это не те же опции и семантика, но это все еще мощно.
Да, похоже, в Chrome есть ошибка, когда дело доходит до изменения body
, пытаясь превратить его в offsetParent
. В качестве обходного решения я предлагаю вам просто добавить еще один div, чтобы обернуть div #content
, и сделать , чтобы прокручивался:
html, body { height: 100%; padding: 0; }
html { width: 100%; background-color: #222; overflow: hidden; margin: 0; }
body
{
width: 40em; margin: 0px auto; /* narrow center column layout */
background-color: white;
position: relative; /* allow positioning children relative to this element */
}
#scrollContainer /* wraps #content, scrolls */
{
overflow: auto; /* scroll! */
position:absolute; /* make offsetParent */
top: 0; height: 100%; width: 100%; /* fill parent */
}
#header
{
position: absolute;
top: 0px; height: 50px; width: 38.5em;
background-color: white;
z-index: 1; /* sit above #content in final layout */
}
#content { padding: 5px 14px 50px 5px; }
Проверено в FF 3.5.5, Chrome 3.0. 195.33, IE8
Живая демонстрация:
$ (function () {$ ('# header'). Find ('button'). Click (function (ev) {var button = $ (this), target = $ ('div.' + button.attr ('класс')); var scroll = target.offsetParent (). scrollTop (); target.offsetParent (). scrollTop (target.offset (). top + scroll - 50) ;});});
html, body {height: 100%; отступ: 0; } html {ширина: 100%; цвет фона: # 222; переполнение: скрыто; маржа: 0; } body {width: 40em; маржа: 0px авто; цвет фона: белый; положение: относительное; } #scrollContainer {overflow: auto; позиция: абсолютная; верх: 0; высота: 100%; ширина: 100%; } #header {позиция: абсолютная; верх: 0px; высота: 50 пикселей; ширина: 38,5em; цвет фона: белый; z-индекс: 1; } #content {padding: 5px 14px 50px 5px; }