Javascript.RU

Измерения окна, документа и элементов

В решении многих задач может понадобиться определить положение, размер окна браузера, или каких-нибудь определенных элементов документа. В этой записи будут перечислены все способы определения этих значений.

Для определения ширины и высоты экрана пользователя используются свойства width и height объекта window.screen. Эти свойства доступны во всех браузерах.

alert("Разрешение вашего экрана: "+ window.screen.width +"x"+ window.screen.height);

Выполнить этот код

Мнения разработчиков в вопросе какое же свойство должно хранить положение окна относительно верхней левой точки экрана, видимо, разошлись.

В итоге мы получили две пары свойств: window.screenY, window.screenX и window.screenTop, window.screenLeft.

Первые два работают в браузерах Mozilla (например Firefox), вторая пара работает в Internet Explorer и Opera. В браузерах, основанных на движке WebKit (например Safari, Chrome), обе пары работают и их значения равны друг другу соответственно.

Но невозможно абсолютно кросс-браузерно определить положение окна, поскольку в разных браузерах отсчет идет до разных точек. Дело в том, что браузеры Internet Explorer и Opera в значениях screenTop и screenLeft хранят координаты левого верхнего угла документа, а не всего окна, поэтому даже при развертывании на весь экран их значения будут не нулевые.

Напротив, остальные браузеры начинают отсчет от верхней левой точки самого окна, как и ожидается для этих свойств. Стоит отметить, что в Firefox, при развертывании окна на весь экран, значения screenY и screenX могут быть отрицательными.

Странно, но в Opera значения screenY и screenX не undefined, однако я не могу понять, что они значат. При любых перемещениях окна эти значения не меняются и все время отрицательны. Если это не очередной глюк Opera, и я что-то упустил, отпишите, пожалуйста, в комментариях.

Положение окна браузера можно изменить двумя методами:

// Переместить окно в коодинаты x, y:
window.moveTo(<x>, <y>);

// Сместить положение окна на значения dx, dy:
// (относительно текущего положения)
window.moveBy(<dx>, <dy>);

Под размерами окна браузера подразумеваются как размер всего окна целиком (вместе с хромом и панелями), так и размер видимой части документа (вьюпорт), или другими словами, размер окна браузера без панелей и хрома.

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

Для получения размеров окна браузера целиком во всех браузерах, кроме Internet Explorer, вы можете использовать свойства window.outerWidth и window.outerHeight. И, насколько я понимаю, аналогов для Internet Explorer не существует.

С размерами вьюпорта тоже существуют проблемы. Дело в том, что в зависимости от браузера и типа документа значения будут разные, в частности - не всегда ясно, будет ли размер скроллбара учитываться, или нет.

Во всех браузерах, кроме Internet Explorer, вы можете получить размер вьюпорта с помощью свойств window.innerWidth и window.innerHeight. Эти свойства всегда будут включать ширину, или высоту скроллбара, что в некоторых задачах неуместно.

Другим способом определения размеров вьюпорта могут служить свойства clientWidth и clientHeight объекта document.documentElement, или, другими словами, элемента html текущего документа.

var html = document.documentElement;
alert("Размер вьюпорта: "+ html.clientWidth +"х"+ html.clientHeight);

Выполнить этот код

Но это справедливо только для режима следования стандартам (CSS1Compat mode), поэтому приведенный выше код работает верно в этом документе.

Но если у страницы не будет указан doctype, то в некоторых браузерах свойства clientWidth и clientHeight объекта document.documentElement будут иметь значения ширины и высоты всего документа целиком, а не только видимой его части, в то время как document.body.clientWidth и document.body.clientHeight наоборот будут иметь значения размеров вьюпорта.

И учитывая то, что нет возможности узнать, что является размерами вьюпорта - свойства document.documentElement или document.body (поскольку они оба существуют, но смысл значений может быть разный), то получается, что кросс-браузерное определение размеров вьюпорта этим способом - невозможно, если документ отображается не в режиме следования стандартам.

Размеры окна браузера можно изменить двумя методами:

// Изменить размер окна к ширине равной width и высоте равной height:
window.resizeTo(<width>, <height>);

// Изменить ширину окна на значение dwidth и высоту - на dheight:
// (относительно текущего размера)
window.resizeBy(<dwidth>, <dheight>);

Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.

Первые два параметра определяются свойствами scrollWidth и scrollHeight объекта document.documentElement. Это, опять же, справедливо только для режима следования стандартам.

Значения ширины и высоты прокрутки окна - количество пикселей, которые могут быть прокручены скроллом. Другими словами - прямоугольник, образованный всеми видимыми элементами документа.

Примечание на счет элементов я сделал не просто так: если какой-нибудь абсолютно позиционированный элемент будет "вылезать" за пределы body, то он "растянет" ширину/высоту скролла, но размеры document.body останутся прежними. Напротив, если размеры документа меньше, чем размеры вьюпорта - то значения scrollWidth и scrollHeight будут равны размерам документа, а не всего окна.

Стоит отметить, что как и в случае с размерами вьюпорта, в режиме "quirks mode" не всегда понятно, свойства какого элемента (documentElement или body) будут иметь нужные нам значения скролла.

Для того, чтобы убедится в том, что в разных браузерах эти свойства имеют разные значения, можете попробовать выполнить тесты, представленные по этой ссылке, в разных браузерах: http://www.quirksmode.org/viewport/experiments/body.html

Для того, чтобы определить на сколько пикселей прокручен документ, нужно обратиться к свойствам scrollTop и scrollLeft объекта document.documentElement, если браузер в режиме следования стандартам, или document.body, если браузер в режиме "quirks mode".

var html = document.documentElement;
alert("Вы уже прокрутили "+ html.scrollTop +"px этой страницы");

Выполнить этот код

В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами window.scrollY и window.scrollX для определения этих значений. Они будут равны scrollTop и scrollLeft соответственно.

Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):

// Изменить положение прокрутки к определенным значениям top и left:
window.scrollTo(<left>, <top>);

// Сместить положение прокрутки на определенные значения dtop и dleft
// (относительно текущих значений):
window.scrollBy(<dleft>, <dtop>);

// Сместить положение прокрутки на высоту lines строк документа:
window.scrollByLines(lines);

// Сместить положение прокрутки на высоту pages страниц документа
// Под страницей подразумевается высота видимой части документа
window.scrollByPages(pages);

Одна из самых часто встречаемых задач - определение размера элемента.

Дело в том, что не всегда достаточно узнать какие значения размеров были установлены через стили элемента и особенно это касается "резиновых" элементов (которые растягиваются в зависимости от размеров их содержания), или элементов с фиксированными размерами, но имеющих внутренние отступы.

Во всех браузерах, независимо от режима, вы можете получить размер элемента с помощью свойств offsetWidth и offsetHeight.

Для демонстрации, небольшой пример:

Элемент с не фиксированной шириной и высотой.
Кликните для появления сообщения.

Код примера:

element.onclick = function() {
    alert("Размер элемента:" + this.offsetWidth +"x"+ this.offsetHeight);
}

Точно так же можно определить размер всего документа, точнее размеры элемента body:

alert("Размер документа: "+ document.body.offsetWidth +"x"+ document.body.offsetHeight);

Выполнить код примера

Одна из самых распространенных задач - определение абсолютной позиции элемента относительно левого верхнего угла документа.

Для определения позиции используются следующие свойства элемента:
offsetTop - отступ сверху, измеряется в пикселах относительно родительского элемента.

offsetLeft - отступ слева, измеряется в пикселах относительно родительского элемента.

offsetParent - ближайший родитель, относительно которого делается отсчет. Его значение будет null если текущий элемент невидим (display: none) или это корневой элемент документа.

Поскольку значение считается от ближайшего родителя, то абсолютная позиция относительно верхнего левого угла документа обычно считается в цикле, который завершается тогда, когда значение offsetParent будет равно null.

Обычно, функция по определению абсолютной позиции выглядит следующим образом:

function offsetPosition(element) {
    var offsetLeft = 0, offsetTop = 0;
    do {
        offsetLeft += element.offsetLeft;
        offsetTop  += element.offsetTop;
    } while (element = element.offsetParent);
    return [offsetLeft, offsetTop];
}

Демонстрационный пример:

Кликните для появления сообщения.

Таким способом можно считать позицию как статичных элементов (position: static), так и элементов с абсолютной позицией (position: absolute).

Надеюсь, что данная запись поможет вам лучше разобраться в измерениях документа и его элементов. Буду рад услышать замечания или вопросы в комментариях.

+15

Автор: Octane, дата: 27 декабря, 2008 - 00:23
#permalink

Ожидал увидеть еще способ кросс-браузерного получения координат мыши

Взяв реализацию из jQuery и немного переделав её, получил:

var mousePosition = function(ie) {
	return ie ? function(doc, body) {
		return function(e) {
			return {x: e.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc.clientLeft || 0), y: e.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc.clientTop || 0)};
		};
	}(document.documentElement, document.body) : function(e) {
		return {x: e.pageX, y: e.pageY};
	}
}(/*@cc_on 1 @*/);

Сам не разбирался еще, что происходит в этом большом выражении, возможно получится упростить


Автор: Narthex (не зарегистрирован), дата: 7 марта, 2009 - 19:00
#permalink

Много полезного, как раз то, что искал. Совсем не то, что ковыряться в Prototype, jQuery или Dojo. Спасибо!


Автор: hogart, дата: 31 марта, 2009 - 15:33
#permalink

Должен отметить, что функция получения координат элемента относительно верхнего левого угла документа даст неверный результат в IE6, если в цепочке offsetParent попадется элемент с position: relative.


Автор: Дмитлантис (не зарегистрирован), дата: 22 апреля, 2009 - 17:33
#permalink

Афтор зачод! Наитолковые статьи в рунете по ЯС! Сразу видно берется за дело с головой. Пишы исчо! Где я только не рылся за этим материалом а оно вот он чо! всё тут и на блюдечге!!
// З.Ы. Илья - ф основную книгу эту статью ИМХО этот каждому пригодится, а в этих блогах фиг нашол, ещё повезло что наткнулся =)


Автор: Kirill (не зарегистрирован), дата: 2 мая, 2009 - 20:54
#permalink

автор пишы исчо это точно:) спс за размеры окна браузера


Автор: Илья Кантор, дата: 2 мая, 2009 - 23:23
#permalink

На основе некоторых идей этой статьи создан основной материал сайта.

Спасибо за статью, Андрей!


Автор: x-yuri, дата: 11 мая, 2009 - 01:49
#permalink

Андрей Параничев, а что можешь сказать по поводу следующего способа определения разеров вьюпорта - http://www.howtocreate.co.uk/tutorials/javascript/browserwindow


Автор: vk (не зарегистрирован), дата: 9 августа, 2009 - 13:22
#permalink

В описаниях функций параметры наоборот.
Нужно
window.scrollTo(left, top);
window.scrollBy(left, top);
Источник:
http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scroll...
http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scroll...


Автор: Андрей Параничев, дата: 16 августа, 2009 - 01:25
#permalink

Спасибо, всегда путаю, что x (икс) это "left" в переносе на слова.


Автор: JSTalker, дата: 11 августа, 2009 - 09:59
#permalink

Классная статья, спасибо!

Но подскажите, как эти полезные свойства применить собственно к элементам страницы: к примеру чтоб таблица, структурирующая GUI, масштабировалась относительно размеров видимой обл-ти? К ее атрибутам не применимы свойства Sad :


Автор: Гость (не зарегистрирован), дата: 26 августа, 2009 - 15:05
#permalink

Как узнать ширину и высоту элемента div до его отображения, это реально? Заранее спасибо


Автор: EugenyK, дата: 30 октября, 2009 - 16:26
#permalink

Для элемента div
"Элемент с не фиксированной шириной и высотой.
Кликните для появления сообщения.":
this.offsetWidth (FF3) = 609
this.offsetWidth (Chrome) = 609
this.offsetWidth (opera10) = 613
this.offsetWidth (IE7) = 613
Высота offsetHeight во всех браузерах посчиталась одинаково.

Для body везде получились различные значения высоты.

По теме ещё статья на quirksmode
http://www.quirksmode.org/dom/w3c_cssom.html#elementview


Автор: Ntropy, дата: 6 ноября, 2009 - 00:09
#permalink

В качестве попытки кроссброузерного определения положения и размеры окна, можно попробовать его пробно подвигать и поизменять размеры. В этом случае сразу выяснится что учитывается для возвращаемых значений.


Автор: Vladimir_O, дата: 9 ноября, 2009 - 16:43
#permalink

А что вы думаете по поводу такого кроссбраузерного определения размера вьюпорта:

var screenWidht = window.innerWidth;
    if(!screenWidht) {
      if(document.documentElement) {
        screenWidht = document.documentElement.clientWidth;
      }
      screenWidht = Math.min(screenWidht, document.body.clientWidth);
    }

Автор: Жорж Борман (не зарегистрирован), дата: 24 декабря, 2009 - 23:52
#permalink

в IE7 не сработал, выдал 0


Автор: Жорж Борман (не зарегистрирован), дата: 24 декабря, 2009 - 23:57
#permalink

Я понял. Для IE надо math.max получать. Спасибо


Автор: Гость (не зарегистрирован), дата: 26 февраля, 2010 - 15:19
#permalink

Работает корректно во всех браузерах!
Определяет размер рабочей области окна!
+ размер области документа (с учетом дивов с абсолютным позициониррованием)
+ работает и в ИЕ6 и в Сафари

function gss() { var w = document.documentElement; var d = document.body;
if (w.scrollHeight < d.scrollHeight) { var h = d.scrollHeight } else { var h = w.scrollHeight } if (h<w.clientHeight) { h = w.clientHeight }
if (w.scrollWidth < d.scrollWidth) { var wd = d.scrollWidth } else { var wd = w.scrollWidth } if (wd<w.clientWidth) { wd = w.clientWidth }
return { ww:w.clientWidth, wh:w.clientHeight, wsl:w.scrollLeft, wst:w.scrollTop, dw:wd, dh:h } }

Автор: Гость, дата: 26 февраля, 2010 - 15:21
#permalink

Ой, чуть не забыл пояснить.
функция возвращает:
ww - window width
wh - window height
dw - document width
dh - document height
wsl - window scroll left
wst - window scroll top


Автор: Гость (не зарегистрирован), дата: 26 февраля, 2010 - 15:28
#permalink

Снова я, уж простите, доработанная функция:

function GetSizes() { 
var w = document.documentElement; 
var d = document.body;
h = Math.max( w.scrollHeight, d.scrollHeight, w.clientHeight); 
wd = Math.max( w.scrollWidth, d.scrollWidth, w.clientWidth);
return { 
   ww:w.clientWidth, //window width
   wh:w.clientHeight, //window height
   wsl:w.scrollLeft, //window scroll left
   wst:w.scrollTop, //window scroll top
   dw:wd, //document width
   dh:h //document height
} 
}

Автор: Гость (не зарегистрирован), дата: 29 декабря, 2011 - 08:51
#permalink

Пасибо, помогло


Автор: lancer, дата: 28 февраля, 2012 - 02:19
#permalink

Норм, хотя когда футер прижат надо под ie8 как минимум перерасчитывать все.


Автор: Гость (не зарегистрирован), дата: 11 марта, 2010 - 15:14
#permalink

С этой функцией наткнулся на некоторые проблемы, все описать довольно сложно, лучше выложу исправленный код. Буду признателен если кто нибудь найдет баги и отпишет mail@atlas-is.ru. Я тестировал на:
ИЕ6 ИЕ7 опреа9/10 Мазилла 3,6 Safari(win32) Chrome
для всех браузеров было 4 разных ситуации с разными доктайпами и т.д. в моем случае сейчас функция работает безупречно для: определения видимой области окна браузера (с корректным учетом скроллбаров). определения области документа/страницы с учетом всех элементов на странице (даже при абсолютном позиционировании). и смещение скролла.

function  GetSizes(){
	var w=document.documentElement; var d=document.body;
	var tww = document.compatMode=='CSS1Compat' && !window.opera?w.clientWidth:d.clientWidth;
	var twh = document.compatMode=='CSS1Compat' && !window.opera?w.clientHeight:d.clientHeight;
	var sl = (window.scrollX)?window.scrollX:(w.scrollLeft)?w.scrollLeft:d.scrollLeft;
    var st = (window.scrollY)?window.scrollY:(w.scrollTop)?w.scrollTop:d.scrollTop;
	var wW1 = (window.innerHeight && window.scrollMaxY)?d.scrollWidth:(d.scrollHeight > d.offsetHeight)?d.scrollWidth:(w && w.scrollHeight > w.offsetHeight)?w.scrollWidth:d.offsetWidth;
	var wH1 = (window.innerHeight && window.scrollMaxY)?d.scrollHeight:(d.scrollHeight > d.offsetHeight)?d.scrollHeight:(w && w.scrollHeight > w.offsetHeight)?w.scrollHeight:d.offsetHeight;
	var wW2 = (self.innerHeight)?self.innerWidth:(w && w.clientHeight)?w.clientWidth:d.clientWidth; var pW = (wW1 < wW2)?wW2:wW1;
	var wH2 = (self.innerHeight)?self.innerHeight:(w && w.clientHeight)?w.clientHeight:d.clientHeight; var pH = (wH1 < wH2)?wH2:wH1;
	pW = ($.browser.msie)?pW:Math.max(w.scrollWidth, w.clientWidth, d.scrollWidth, d.offsetWidth);
	pH = ($.browser.msie)?pH:Math.max(w.scrollHeight, w.clientHeight, d.scrollHeight, d.offsetHeight);
	if (window.opera){ tww = (d.scrollWidth==d.clientWidth)?w.clientWidth:tww; twh = (d.scrollHeight==d.clientHeight)?w.clientHeight:twh;}
	return { 
		winWidth:tww, 
		winHeight: twh, 
		winScrollLeft: sl, 
		winScrollTop: st, 
		pageWidth: pW, 
		pageHeight: pH
	} 
}

Надеюсь кому то помог! Потому как сам перерыл огромную кучу информации пока соорудил это.


Автор: Гость (не зарегистрирован), дата: 28 августа, 2012 - 17:36
#permalink

Спасибо, но для тех, кто не подключал jQuery эту часть кода

$.browser.msie

надо заменить на

!-[1,]

Автор: stig85 (не зарегистрирован), дата: 31 мая, 2010 - 06:20
#permalink

Да, уж! Молодец!


Автор: Шторм (не зарегистрирован), дата: 24 июня, 2010 - 03:20
#permalink

Спасибо. Долго искал эту информацию и нашел.


Автор: edd_k, дата: 30 июля, 2010 - 00:49
#permalink

А я уже давно забил на попытки сооружать мегауниверсальные функции. Я следую таким правилам:
- верстаю в xhtml со следующим шаблоном пустого дока:

<?xml version="1.0" encoding="windows-1251" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>Title</title>
</head>

<body>

</body>
</html>

- если страница верстается php, то конечно же в нем шлется заголовок

header('Content-Type: text/html; charset=windows-1251');

- если что-то пошло не так, значит накосячил в html-коде и он уже в квирк-моде, открываю в Опере, жму "Соблюдены ли web-стандарты" и добиваюсь успешной проверки на W3C-валидаторе. По-ходу, практически не встречаю в инете страниц, проходящих валидацию. Эта страничка например тоже не проходит - куча досадных ошибок типа не указан тип скрипта, блок стилей вставлен там где нельзя, спаны закрываются, но не открывались перед этим, id дублирующиеся и т.д. Очень распространен подход, когда в js пишут что-то типа

document.write('<scr' + 'ipt>alert("Hello!");</scr' + 'ipt>');

(На этой странице такое есть) Ну а слеш в закрывающем теге кто экранировать будет!? Зачем делить слово SCRIPT на две части, если тут же ошибка потяжелее?

Такой код

<?xml version="1.0" encoding="windows-1251" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>JS Sample</title>
</head>

<body>

<script type="text/javascript">
<!--
document.write('<script>alert(\'Hello!\');<\/script>');
document.write('<script>alert("Hello - 2!");<\/script>');
//-->
</script>

</body>
</html>

проходит валидацию, ессесно работает и ничего не нужно делить. Нужно просто не забыть указать тип скрипта, вставить в нем коменты-ограничители для XML-парсера и экранировать символы / и ' в строках.

А когда половина страниц валидируются, другие в квирке рисуются, то конечно начинается каша, геморой, бессонные ночи и т.д.

Итак, начинать следует со стандартизации своих проектов и исправления в них ошибок перед каждым релизом (мы ж не роботы, конечно забываем временами и коменты вставлять и < br > вместо < br /> на скорую руку пишем) - отправка страницы прямо из браузера на W3C всегда под рукой.

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

А так, провел небольшой тест на Опера 10.60 (пачка пердыдущих версий скорей всего то же выдаст), IE8 и FF 3.6.6. Создал корректную страницу с длинной таблицей на 100 строк, каждая строка имеет паддинг, прописанный в CSS, что в IE и в Фоксе приводит к увеличению высоты html (т.е. html становится длиннее body), аналогично и при div-верстке, т.е. лично таблицы тут ни при чем. Такая же фича наблюдается и в Опере ИНОГДА. Возможно в квирке - не проследил. В тестовом примере в Опере html не удлинился и не испортил страницу лишним белым куском на 700+ точек.

Результаты таковы (html - это document.documentElement):

				Opera	FF	IE

window.screen.availWidth =	1280	1280	1280
window.screen.availHeight =	994	994	994

window.innerWidth =		1280	1280	-
window.innerHeight =		878	868	-

body.clientTop =		0	0	0
html.clientTop =		0	0	2

body.clientLeft =		0	0	0
html.clientLeft =		0	0	2

body.offsetWidth =		1263	1263	1259
html.offsetWidth =		1263	1263	1259
body.clientWidth =		1263	1263	1259
html.clientWidth =		1263	1263	1259
body.scrollWidth =		1263	1263	1259
html.scrollWidth =		1263	1263	1259

body.offsetHeight =		878	868	848
html.offsetHeight =		878	868	848
body.clientHeight =		878	868	848
html.clientHeight =		878	868	848
body.scrollHeight =		878	868	2471
html.scrollHeight =		2371	3000	3178

body.scrollLeft =		0	0	0
html.scrollLeft =		0	0	0
body.scrollTop =		0	0	0
html.scrollTop					
 - находясь в самом верху =	0	0	0
 - находясь в самом низу =	1493	2132	2330

html длиннее body?		нет	да	да

Что в итоге?

1. Виевпорт во всех трех записан и в body, и в html корректно и с вычетом скролбара.

2. Во всех браузерах body.scrollTop равен 0 не зависимо от того, где мы находимся - вверху или внизу. В принципе, логично, у нас же html скролится, а не body.

2. Во всех браузерах offsetWidth и offsetHeight что у body, что у html равны размеру виевпорта.

3. Исходя из вышесказанного и увиденного полная высота именно body записана только в IE, в котором мы можем видеть, что body - 2471 px, а html - 3178 px; в Опере мы можем понадеяться, что лишней простыни после body не добавлено и следовательно его высота равна высоте html, а вот в Фоксе мы понятия не имеем, что body короче html и вообще короче ли или одинаковы.

Если нужно знать высоту именно body, то в ряде случаев можно попробовать запретить скрол html-у и выдать скролл body. Но в ряде случаев такой финт ушами не получится (если получится вообще, т.к. не пробовал еще). Например если у нас дизайн на 100% высоты видимого окна, тогда чтобы размер документа был на всю видимую высоту даже если контент коротковат для этого, нам придется в css выставить высоту 100% для html, body и контейнера, который содержит контент и например футер или бекграунд внизу. А в таком случае когда контента будет больше чем на высоту виевпорта указанные нами 100% для html будут делать его всегда не меньше чем body в нем,который тоже не меньше чем контент в нем. Т.е. фишка с коротким html и скролящимся в нем body - не возможна.

Вот так. Придется обходится высотой html или решать, как обойти проблему его удлинения...


Автор: Delis, дата: 2 сентября, 2010 - 23:01
#permalink

Стоит отметить, что в IE8 (может и других версий) screen.width и window.screen.width возвращают не реальное разрешение экрана, а виртуальное (т.е. при изменении масштаба отображения меняется и разрешение, возвращаемое функциями, например, при помощи Ctrl+колесо мыши).


Автор: RE_, дата: 20 сентября, 2010 - 11:19
#permalink

Доходчиво про ClientX/Y и почему Опера их нормально обрабатывает.


Автор: danik.js, дата: 30 сентября, 2010 - 06:38
#permalink

Статья улёт!
Риспект автору етого каммента


Автор: Гость (не зарегистрирован), дата: 25 октября, 2010 - 18:15
#permalink

Говорю Спасибо за сайт.
Мне очень помог.


Автор: Гость (не зарегистрирован), дата: 3 января, 2011 - 19:15
#permalink

Спасибо за статью! Но нигде не могу найти, как можно (и можно ли вообще) определить расстояние нижней границы элемента до нижней границы окна браузера. Может, кто-нибудь подскажет?.. Заранее спасибо!


Автор: Сочи олимпиада (не зарегистрирован), дата: 24 января, 2011 - 16:29
#permalink

Всем привет, Великолепная фраза


Автор: henteeJizet (не зарегистрирован), дата: 5 февраля, 2011 - 15:57
#permalink

Интересно конечно, но есть много вопросов по теме ИМХО. Давайте обсудим (мыло в подписи) или тут, если не затруднит


Автор: negr78, дата: 14 июня, 2011 - 16:30
#permalink

"Буду раЗ услышать замечания ...."


Автор: vasiliyvasilevich (не зарегистрирован), дата: 19 августа, 2011 - 02:36
#permalink

помог scrollHeight снять с дива высоту динамически

var nextdata = 10; var controlXP = null;

function ScrollModalWin () {

Modalheightobj = (Winmedia.WindowData.scrollHeight - 450);

EvenTop = Winmedia.WindowData.scrollTop;

// ---------------------------------- //

if ((EvenTop >= Modalheightobj) && (EvenTop > controlXP) && (controlXP < Modalheightobj)){

controlXP = Modalheightobj;

switch (arguments[0]) {

case '415' : case '425' :

SendContent(Array(arguments[0],arguments[1],arguments[2],arguments[3],(nextcon+=50)));

break;

}

}

}


Автор: Iskander (не зарегистрирован), дата: 5 сентября, 2011 - 22:56
#permalink

Интерестная статья..
подскажите как сделать:
при scrollTop(300) , например, чтоб цвет блока менялся, нужно производить изменения по достижению этой высоты, без кликов и перезагрузок страницы


Автор: Гость (не зарегистрирован), дата: 5 сентября, 2011 - 22:59
#permalink
$(window).load(function() {		
		var d = $("div.demo").scrollTop();
		var v = 100;
		
		$("div.demo div p").css("border", "5px solid green");
		
		if (d > v){
			$("div.demo div p").css("border", "5px solid red");
			$("div.demo div p").text(".scrollTop(d): " + d);
		};
	});

вот такой вариант покачто получился, но приходится обновлять страницу =( что не есть хорошо...


Автор: Stimulus, дата: 8 сентября, 2011 - 02:35
#permalink

Blink offetLeft - отступ слева, измеряется в пикселах относительно родительского элемента.


Автор: Гость (не зарегистрирован), дата: 29 ноября, 2011 - 04:14
#permalink

подскажите как можно проверить, до конца ли прокручена страница скроллом?


Автор: KonstantinGreat (не зарегистрирован), дата: 29 ноября, 2011 - 17:32
#permalink

есть вопрос к хорошей статье, у меня не работает функция offsetHeight в chrome, показывает 0, если принудительно не определен размер diva, что делать? заранее благодарен
пс: хром с 15ой версии, привиос версии не проверял


Автор: Flyex (не зарегистрирован), дата: 29 апреля, 2012 - 23:21
#permalink

я конечно догадывался, что проще пролезть в форточку, чем пройти через дверь, но все же вот самый простой способ узнать высоту вьюпорта в любом браузере!=)

<body onload="start()" style="overflow:  hidden;">
<br> x 100 раз для самого тупого создания скрола
!!!!
<script type="text/javascript">
function start(){
alert("Высота видимой части документа: "+document.body.clientHeight);
var bodd = document.getElementsByTagName("body")[0];
bodd.style.overflow="auto";
}
</script>

</body>

абсолютно аналогично для ширины. что проще чем убрать скролы, обрубив все лишнее, что вылезает за окно браузера; измерить высоту и вернуть обратно?=)


Автор: Flyex (не зарегистрирован), дата: 30 апреля, 2012 - 00:07
#permalink

коечто подправил. для динамической работы)

<body onload="alert('Высота видимой части документа: '+innerr())" onResize="innerr()">
<br> x 100 раз для самого тупого создания скрола
!!!!
<script type="text/javascript">
function innerr(){
var bodd = document.getElementsByTagName("body")[0];
bodd.style.overflow="hidden";
hh=document.body.clientHeight;
bodd.style.overflow="auto";
return hh;
}
</script>
</body>

Автор: hard-t, дата: 10 июля, 2012 - 17:05
#permalink

Вопрос исключительно для профессионалов. Я хочу узнать реальную ширину текста. Есть стиль для некоего div'а:

div.dopDivHeight
{
white-space: pre-wrap;
word-wrap: break-word;
position: absolute;

}

Соответственно забиваю текст в нужный div и использую свойство scrollWidth. Получаю реальную ширину, однако это свойство не дает дробной части, которая есть в firefox. отсюда вопрос, как найти эту потерянную дробную часть.


Автор: SkyAn (не зарегистрирован), дата: 31 октября, 2012 - 19:48
#permalink

Подскажите, интересует вывод всплывающего окна по средине браузера. Сейчас сделана привязка к координатам родительской ссылки.


Автор: Гость (не зарегистрирован), дата: 6 февраля, 2013 - 16:36
#permalink

Не паримся, определяем размер страницы так используя jquery - $(document).height() - коротко, правильно, кросбраузерно!!!


Автор: zhurchik, дата: 5 апреля, 2013 - 19:36
#permalink

Спасибо, познавательно!


Автор: Я - Владимир (не зарегистрирован), дата: 16 октября, 2014 - 00:31
#permalink

Огромное спасибо!
Отличная и полезная статья.
Также - спасибо комментаторам, многие дельные!!!


Автор: Дан12 (не зарегистрирован), дата: 22 апреля, 2016 - 17:54
#permalink

не лучше ли сейчас вместо offsetWidth и offsetHeight. всегда использовать getBoundingClientRect?

дело в том, что в chome вычислении высоты выдаёт предупреждение:
SVGElement.offsetWidth' is deprecated and will be removed in M50
Или у getBoundingClientRect есть свои недостатки? (я не нашёл)
Ну, кроме того, что может понадобиться округление для width / height.


Автор: Дан12 (не зарегистрирован), дата: 22 апреля, 2016 - 17:56
#permalink

уточнение: при определении высоты для элемента svg.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
13 + 2 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
Андрей Параничев
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum