JavaScript скрипты


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

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


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

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

1

2

3

4

5

6

7

8

9

10

//Прочитать значение scrollTop
//Прокрутить от верха на 50 вниз

Но когда дело касается прокрутки всего документа, то нужно учитывать наличие в документе конструкции !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 определены выше.

SAPE все усложнил?

MainLink - простая и прибыльная продажа ссылок!

Последние поступления:

Размещена 10 августа 2020 года

Я по ТВ видел, что через 10 лет мы будем жить лучше, чем в Германии...
Я не понял, что это они с Германией сделать хотят?!

читать далее…

ТехЗадание на Землю

Размещена 14 марта 2018 года

Пpоект Genesis (из коpпоpативной пеpеписки)

читать далее…

Шпаргалка по работе с Vim

Размещена 05 декабря 2017 года

Vim довольно мощный редактор, но работа с ним не всегда наглядна.
Например если нужно отредактировать какой-то файл например при помощи crontab, без знания специфики работы с viv никак.

читать далее…

Ошибка: Error: Cannot find a valid baseurl for repo

Размещена 13 сентабря 2017 года

Если возникает ошибка на centos 5 вида
YumRepo Error: All mirror URLs are not using ftp, http[s] or file.
Eg. Invalid release/

читать далее…

Linux Optimization

Размещена 30 июля 2012 года

Prelink

читать далее…