jQuery scrollTop (), кажется, не работает в Safari или Chrome (Windows)

Избранная строка PowerShell подобна, это не те же опции и семантика, но это все еще мощно.

39
задан Pointy 2 December 2009 в 01:14
поделиться

6 ответов

Да, похоже, в 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; }