Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Прокрутка страницы (https://javascript.ru/forum/events/31603-prokrutka-stranicy.html)

user100500 13.09.2012 22:36

Прокрутка страницы
 
На странице увеличиваю изображение(меняю css свойства ширины и высоты), и оно становится настолько большим что появляются полосы прокрутки. Необходимо сделать прокрутку страницы на центр экрана, но с учетом уже существующей прокрутки, т.е. если уже есть полосы прокрутки то при увеличении должно перематывать на центр открытой части изображения. Как зум в фотошопе в общем(куда кликнули туда и увеличивает, а у меня увеличение в центр видимой части изображения должен быть).
Делаю так, но оно увеличивает только в центр страницы, а мне надо учитывать полосы прокрутки:
var sY = $(document).height() - $(window).height();
var sX = $(document).width() - $(window).width();
scrollTo(sX / 2, sY / 2);

Видимо надо учитывать document.documentElement.scrollHeight или document.documentElement.scrollTop, но у меня не получается. Подскажите как это реализовать.

user100500 14.09.2012 13:23

это вообще реально сделать?

cyber 14.09.2012 14:41

читайте эту http://learn.javascript.ru/metrics и следующую страницу

bes 14.09.2012 15:24

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" style="width: 100px; height: 100px">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<script>
window.onload = function () {
	var a = 100;
	document.images[0].onclick = function () {
		this.style.width = this.style.height = (a = a + 10) + 'px';
		
		var h = window.innerHeight;
		var w = window.innerWidth;
		var difH = 0;
		var difW = 0;
		if (a > h) {
			difH = (a - h)/2;
		}
		if (a > w) {
			difW = (a - w)/2;
		}
		this.scrollIntoView(true);
		window.scrollBy(difW, difH);
	}
}
</script>

user100500 14.09.2012 18:09

Цитата:

Сообщение от bes (Сообщение 204657)
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" style="width: 100px; height: 100px">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<script>
window.onload = function () {
	var a = 100;
	document.images[0].onclick = function () {
		this.style.width = this.style.height = (a = a + 10) + 'px';
		
		var h = window.innerHeight;
		var w = window.innerWidth;
		var difH = 0;
		var difW = 0;
		if (a > h) {
			difH = (a - h)/2;
		}
		if (a > w) {
			difW = (a - w)/2;
		}
		this.scrollIntoView(true);
		window.scrollBy(difW, difH);
	}
}
</script>

а в чем здесь отличие от моего кода? здесь же тоже не учитываются полосы прокрутки.

bes 14.09.2012 18:21

Цитата:

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

как понял, так и отписал :)
клиентская часть окна при превышении её размеров изображением всегда находится в центре изображения (равноотступает сверху/снизу и слева/спарва)
какие полосы прокрутки, куда что должно смещаться, объясните поподробнее и лучше с парой скриншотов

user100500 14.09.2012 23:35

Цитата:

Сообщение от bes (Сообщение 204708)
как понял, так и отписал :)
клиентская часть окна при превышении её размеров изображением всегда находится в центре изображения (равноотступает сверху/снизу и слева/спарва)
какие полосы прокрутки, куда что должно смещаться, объясните поподробнее и лучше с парой скриншотов

ну вот например на странице http://www.avege.ru/allimg/brim/bsf03.png есть полоса прокрутки. при увеличении надо чтобы увеличило и перематывало так что в центре экрана был низ изображения на котором написано "the new york times", т.е. в средину текущей открытой позиции сайта.

bes 14.09.2012 23:46

Держать низ изображения на том месте, где он находился в момент увеличения, что ли или просто по середине окна?

user100500 15.09.2012 10:30

Цитата:

Сообщение от bes (Сообщение 204708)
Держать низ изображения на том месте, где он находился в момент увеличения, что ли или просто по середине окна?

вот скрин. увеличивает ровно в центр видимой части изображения. вот надо чтобы перематывало в центр когда увеличивается изображение.
1:
2:

bes 15.09.2012 12:18

ну мой пример так и работает, попробуйте в FF


Часовой пояс GMT +3, время: 07:35.