Pull to refresh

Выравнивание по центру видимой части контейнера

Reading time2 min
Views4.7K
VisibleCenteringНеобходимо разместить элемент посередине видимой части его контейнера. Если часть контейнера скрылась за областью прокрутки, то элемент нужно разместить в центре видимой области. Если контейнер не виден вообще, то элемент не виден вместе с ним. А если контейнер занимает весь экран – элемент должен быть посередине экрана.

Приблизительно как на схемке справа.

О размерах элемента и его контейнера ничего не известно.

Вот пример страницы как я это сделал. На странице три больших div’а, в среднем помещен выравнивающийся по видимому центру элемент. Проверял в IE 6 & 7 (не моя прихоть – задача такая).

Интересно узнать как можно сделать проще и надёжнее? И вот в Opera 9.5, например, не работает. А хотелось бы большей универсальности кода.

Относительное (relative) позиционирование поместит элемент в центр контейнера. При этом если середина контейнера выходит за видимые пределы, то элемент не будет видно (как на рисунке). Способы позиционирования fixed и static совсем не подходят.

Я использовал режим absolute. И через прописал свойства left и top в виде css expression:
.divVisibleCenter
{
position:absolute;
top: expression(GetVisibleCenterY(this));
left: expression(GetVisibleCenterX(this));
}


Вычисления координат x и y элементов вынесены в отдельные JavaScript-функции GetVisibleCenterX и GetVisibleCenterY соответственно:
function GetVisibleCenterX(item)
{
var c = item.parentNode;
var s = c.getBoundingClientRect();
var right = c.document.documentElement.offsetWidth — ((s.right<c.document.documentElement.offsetWidth)?c.document.documentElement.offsetWidth-s.right:0);
var left = c.offsetLeft+((c.offsetLeft+s.left>c.offsetLeft+right)?0:-s.left);
var offs = ((c.offsetLeft > left)?(c.offsetLeft — left):0);
var width = right — offs;

return left+offs+(width/2) — item.clientWidth/2;
}
function GetVisibleCenterY(item)
{
var c = item.parentNode;
var s = c.getBoundingClientRect();
var bottom = c.document.documentElement.offsetHeight — ((s.bottom<c.document.documentElement.offsetHeight)?c.document.documentElement.offsetHeight-s.bottom:0);
var top = c.offsetTop+((c.offsetTop+s.top>c.offsetTop+bottom)?0:-s.top);
var offs = ((c.offsetTop > top)?(c.offsetTop — top):0);
var height = bottom — offs;
return top+offs+(height/2) — item.clientHeight/2;
}
Tags:
Hubs:
Total votes 20: ↑13 and ↓7+6
Comments16

Articles