mannaro
@mannaro
Умею профессионально гуглить

Определение смещения блока по оси Y?

Здравствуйте! Подскажите пожалуйста, как определить смещение блока (#block) по оси Y внутри своего родителя (или как задать scrollTop родителя так, чтобы #block оказался посередине)?


Что можем получить: #block, его родителя и т.п.

Что неизвестно: размер детей родителя.

Зарисовка13485.png
  • Вопрос задан
  • 3910 просмотров
Решения вопроса 1
UZER2006
@UZER2006
Ничего сложного. Получаем положение блока, получаем высоту рабочей области окна. Задаём соответствующий scrollTop.

jQuery
$('body')[0].scrollTop = $('#block').position().top-$(window).height()/2;

Чистый JS
var el = document.getElementById('#block');
var pos = 0;
while el(offsetTop){
	pos += el.offsetTop;
	el = el.offsetParent;
}
document.body.offsetTop = pos - window.innerHeight / 2;

Если нужно, можно ещё добавить поправку на размер элемента -> приплюсовать половину его высоты.
Получить высоту -> $('#block').height() либо document.getElementById('#block').scrollHeight
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
spmbt
@spmbt
В jQuery есть .position(). В нативном:
$getPosition = function(o){
	var x =0, y =0;
	while(o){
		x += o.offsetLeft ||0;
		y += o.offsetTop ||0;
		o = o.offsetParent || o.parentNode;
	}
	return {x:x, y:y};
}

Смещение будет разностью смещений блока и обрамляющего (который не всегда будет непосредственным родителем, поэтому цикл). Или напишите цикл с остановкой while(o && o.className !='класс_родителя'). Положение прокрутки выставляется через тот же scrollTop, высота блока — offsetHeight (вызывает reflow). scrollTop автоматически не выходит за пределы offsetHeight, поэтому близкие к краям блоки не окажутся точно в центре, но чаще всего это и нужно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы