Как прокрутить содержимое окна документа?

Размещена 3 сентабря, 2008 года

Узнать на сколько прокручен объект вниз или влево или прокрутить его на определенную велечину можно с помощью свойств scrollTop и scrollLeft объекта.

Примечание: для старых браузеров Netscape (4-6), Opera 5 следует использовать свойства pageXOffset, pageYOffset

Но когда дело касается прокрутки всего документа, то нужно учитывать наличие в документе конструкции !DOCTYPE. Если !DOCTYPE переключает браузер в режим следования стандартам, то некоторые свойства объекта document.body становятся доступными лишь через объект document.documentElement, это относится и к свойствам scrollLeft, scrollTop.

Если браузер находится в режиме CSS1Compat (режим следования стандартам), что можно узнать из свойства document.compatMode, document.body.scrollLeft и document.body.scrollTop всегда будут равны нулю, а правильные значения можно получить через document.documentElement.scrollTop и document.documentElement.scrollLeft. Но все меняется наоборот если браузер находиться в режиме обратной совместимости (document.compatMode == "BackCompat").

Ниже показано как узнать значения scrollTop и scrollLeft для тела документа:

function getBodyScrollTop()
{
  return self.pageYOffset || 
    (document.documentElement && document.documentElement.scrollTop) || 
    (document.body && document.body.scrollTop);
}

function getBodyScrollLeft()
{
  return self.pageXOffset || 
    (document.documentElement && document.documentElement.scrollLeft) || 
    (document.body && document.body.scrollLeft);
}

* На заметку: методы scrollBy(numHorz, numVert) и scrollTo(numX, numY) так же позволяют прокуручивать содержимое объекта.

scrollBy(numHorz, numVert) - прокручивает на указанное смещение от текущего положения (numHorz, numVert могут принимать положительные, отрицательные значения, а так же 0 для того чтобы отсавить положение без изменения).

scrollTo(numX, numY) - прокручивает содержимое к определенной позиции.

Например: window.scrollBy(0,-10); //подняться вверх на 10 пикселей

Как узнать на сколько прокручена страница (проскролленность страницы)?

function getBodyScrollTop()
{
  return self.pageYOffset || 
    (document.documentElement && document.documentElement.scrollTop) || 
    (document.body && document.body.scrollTop);
}

function getBodyScrollLeft()
{
  return self.pageXOffset || 
    (document.documentElement && document.documentElement.scrollLeft) || 
    (document.body && document.body.scrollLeft);
}

Как узнать ширину и высоту всей страницы вместе со скроллингом, а не только её видимой части?

//Размер документа по вертикали
function getDocumentHeight()
{
  return (document.body.scrollHeight > document.body.offsetHeight)?
    document.body.scrollHeight:
    document.body.offsetHeight;
}

//Размер документа по горизонтали
function getDocumentWidth()
{
  return (document.body.scrollWidth > document.body.offsetWidth)?
    document.body.scrollWidth:
    document.body.offsetWidth;
}

Как узнать координаты центра окна с учетом скроллинга?

function getClientCenterX()
{
  return parseInt(getClientWidth()/2)+getBodyScrollLeft();
}

function getClientCenterY()
{
  return parseInt(getClientHeight()/2)+getBodyScrollTop();
}

Функции getClientWidth, getClientHeight и getBodyScrollLeft, getBodyScrollTop определены выше.