Зафиксировать положение прокрутки

okunev2 · September 10, 2007

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

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

#scrolling_place {
 position:absolute;
 left:0px;
 top:2px;
 width:962px;
 height:92px;
 z-index: 10;
 overflow: hidden;
}

вот ещ? Ява-скрипт:

function StripValue(value)
{
 value = value + '';
 //alert(value);
 tmp_length = value.length;
 value = value.substring(0, tmp_length-2);
 return value;
}
var BorderElement = document.getElementById('photo_place');
var isMSIE = document.attachEvent != null;
var isGecko = !document.attachEvent && document.addEventListener;

var DraggingItem = new Object();

function StartDrag (event, _this, _afteraction,BorderElement)
{
 DraggingItem.This = _this;
 //Begin Of Additional parts of function for Unipak
 DraggingItem.Image = document.getElementById('scroll_image');
 DraggingItem.Place = document.getElementById('scrolling_place');
 DraggingItem.PlaceIn = document.getElementById('scrolling_place_in');
 DraggingItem.PlaceIn.Width = StripValue(DraggingItem.PlaceIn.style.width);
 //End Of Additional parts of function for Unipak
 DraggingItem.AfterAction = _afteraction;
 DraggingItem.BorderElement = document.getElementById(BorderElement);
 DraggingItem.BorderWidth = StripValue(DraggingItem.BorderElement.style.width);
 DraggingItem.BorderHeight = StripValue(DraggingItem.BorderElement.style.height);
 DraggingItem.BaseWidth = StripValue(DraggingItem.This.style.width);
 DraggingItem.BaseHeight = StripValue(DraggingItem.This.style.height);
 //Begin Of Additional parts of function for Unipak
 //Получаем шаг сдвига внутреннего модуля на каждый пиксел сдвига ползунка
 DraggingItem.Minus = DraggingItem.PlaceIn.Width - DraggingItem.BorderWidth;
 if(DraggingItem.Step < 0) DraggingItem.Step = 0;
 else DraggingItem.Step = DraggingItem.Minus/DraggingItem.BorderWidth;

 //alert(DraggingItem.PlaceIn.Width + ' - ' + DraggingItem.BorderWidth + ' = ' + DraggingItem.Minus + ' | step = ' + DraggingItem.Step);
 //End Of Additional parts of function for Unipak
 var position = new Object();
 if (isMSIE)
 {
 position.x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
 position.y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
 }
 if (isGecko)
 {
 position.x = event.clientX + window.scrollX;
 position.y = event.clientY + window.scrollY;
 }
 //alert(DraggingItem.id);

 DraggingItem.cursorStartX = position.x;
 DraggingItem.StartLeft = parseInt (DraggingItem.This.style.left);
 if (isNaN (DraggingItem.StartLeft)) DraggingItem.StartLeft = 0;

 DraggingItem.cursorStartY = position.y;
 DraggingItem.StartTop = parseInt (DraggingItem.This.style.top);
 if (isNaN (DraggingItem.StartTop)) DraggingItem.StartTop = 0;


 if (isMSIE)
 {
 document.attachEvent ("onmousemove", ProceedDrag);
 document.attachEvent ("onmouseup", StopDrag);
 window.event.cancelBubble = true;
 window.event.returnValue = false;
 }
 if (isGecko)
 {
 document.addEventListener ("mousemove", ProceedDrag, true);
 document.addEventListener ("mouseup", StopDrag, true);
 event.preventDefault();
 }
}

function ProceedDrag (event)
{
 var position = new Object();
 //alert(DraggingItem.Step);
 if(DraggingItem.Step < 0) return;
 if (isMSIE) {
 position.x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
 position.y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
 }
 if (isGecko)
 {
 position.x = event.clientX + window.scrollX;
 position.y = event.clientY + window.scrollY;
 }
 document.getElementById('scroll_left').style.display = 'none';
 document.getElementById('scroll_right').style.display = 'none';
 var nextX = DraggingItem.StartLeft + position.x - DraggingItem.cursorStartX;
 if (nextX < -150) nextX = -150;
 DraggingItem.Image.src = 'images/scroll.gif';
 if(nextX >= DraggingItem.BorderWidth - DraggingItem.BaseWidth)
 {
 DraggingItem.Image.src = 'images/scroll_right.gif';
 //alert('change');
 i = 0;
 nextX = DraggingItem.BorderWidth - DraggingItem.BaseWidth;
 //window.status = 'Coords' + nextX + '(' + DraggingItem.BorderWidth + '-' + DraggingItem.BaseWidth + ')';
 }
 if(nextX < 0) {
 nextX = 0;
 DraggingItem.Image.src = 'images/scroll_left.gif';
 }
 DraggingItem.This.style.left = nextX + "px";
 DraggingItem.PlaceIn.style.left = 0 - nextX*DraggingItem.Step + "px";
 //alert(DraggingItem.PlaceIn.style.left);


 var nextY = DraggingItem.StartTop + position.y - DraggingItem.cursorStartY;
 if (nextY > 360) nextY = 360;

 if(nextY > DraggingItem.BorderHeight - DraggingItem.BaseHeight)
 {
 nextY = DraggingItem.BorderHeight - DraggingItem.BaseHeight;

 //window.status = 'Coords' + nextX + '(' + DraggingItem.BorderWidth + '-' + DraggingItem.BaseWidth + ')';
 }
 if(nextY < 0) nextY = 0;

 DraggingItem.This.style.top = nextY + "px";

 if (isMSIE)
 {
 window.event.cancelBubble = true;
 window.event.returnValue = false;
 }
 if (isGecko) event.preventDefault();
}

function StopDrag (event)
{
 if (isMSIE)
 {
 document.detachEvent ("onmousemove", ProceedDrag);
 document.detachEvent ("onmouseup", StopDrag);
 }
 if (isGecko)
 {
 document.removeEventListener ("mousemove", ProceedDrag, true);
 document.removeEventListener ("mouseup", StopDrag, true);
 }

 if (DraggingItem.AfterAction) DraggingItem.AfterAction (DraggingItem.This);

 //WriteCoords();
}

function PutBack (item)
{
 item.style.zIndex = 2;;
}
function WriteCoords()
{
 //alert(el.offsetLeft);
 //alert(el.offsetTop);
 var v_x = document.getElementById('offset_x');
 var v_y = document.getElementById('offset_y');
 v_x.value = StripValue(DraggingItem.This.style.left);
 v_y.value = StripValue(DraggingItem.This.style.top);
}

PacMan · September 11, 2007

Многа букаф. Ниасилю. Локализируйте проблему.

okunev2 · September 11, 2007

Вот исходник маленького сайтика, одна страничка:

http://dump.ru/files/j/j41006430/

Там есть внизу прокуртка в которую заключены изорбражения, до пустим берем прокрутку и тянем вправо до конца и кликаем по последней картинке и загружается страница, но скролл ворачивается в начальное положение в левый край. Вопрос состоит в том как этот Ява код или css подправить, чтобы скролл прокрутки оставался в том же положении, после перезагрузки страницы, где его оставили прокрутив в правый край!? Вроде ясно объяснил

Admin · September 11, 2007

это вам в раздел яваскрипт. Тут даже сосы не помогут)

Tokolist · September 11, 2007

okunev2

сократите код, оставив самое главное

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

смотрите события onload, onunload для window

http://www.javascriptkit.com/jsref/window.shtml

сохраняйте состояние в cookies

больше пока ничего не придумал....

okunev2 · September 12, 2007

я в Яве не особо не разбераюсь

Спасибо за ответ, но для меня это сложно в понимании, мне примерчик с кодом!?

D.S.Denton · September 12, 2007

мне примерчик с кодом!?

<body onload="location.href='http://denton.msk.ru'; return false;">

пойдет такой пример?

okunev2 · September 12, 2007

и как его использовать в моем примере с кодом?

okunev2 · September 13, 2007

<body onload="location.href='index.html'; return false;">

сделал так и страница зациклилась грузится без остановки!

Что именно, не понял как использовать данный код?!

Admin · September 13, 2007

потому что надо в двух онлоадах писать

ещ? раз поапишь тему - бан 1 день, если потом ещ? - то дольше... Ну ты понял меня.

Tokolist · September 13, 2007

okunev2 предупреждение за флуд (тем более не впервые). второго не будет

okunev2

ИМХО у Вас два варианта развития событий:

1. учить JavaScript, искать примеры в сети (подсказку я Вам уже дал)

2. заплатить деньги человеку, который его знает (раздел "Работа")

<body onload="location.href='index.html'; return false;">
сделал так и страница зациклилась грузится без остановки!
Что именно, не понял как использовать данный код?!

ИМХО пример не самый удачный

потому что надо в двух онлоадах писать
ещ? раз поапишь тему - бан 1 день, если потом ещ? - то дольше... Ну ты понял меня.

djredshake, в каких "двух онлоадах"?

ладно, okunev2, подождешь до завтра - сделаю пример, но не более

okunev2 · September 14, 2007

ладно, okunev2, подождешь до завтра - сделаю пример, но не более

Пасиб

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

Не в обиду мужики!

Tokolist · September 14, 2007

приблизительный пример. еще много не учтено

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#scrolldiv {
 overflow: auto;
 height: 100px;
 width: 100px;
}
</style>
<script type="text/javascript">
windowLoad = function() {
 var dc = document.cookie;
 var execArr = /scrolldiv_scrollTop=(d+); scrolldiv_scrollLeft=(d+)/.exec(dc);
 var scrolldiv = document.getElementById('scrolldiv');
 scrolldiv.scrollTop = execArr[1];
 scrolldiv.scrollLeft = execArr[2];
}

windowUnload = function() {
 var scrolldiv = document.getElementById('scrolldiv');
 document.cookie = 'scrolldiv_scrollTop=' + scrolldiv.scrollTop;
 document.cookie = 'scrolldiv_scrollLeft=' + scrolldiv.scrollLeft;
}

if (window.addEventListener) {
 window.addEventListener("load", windowLoad, false);
 window.addEventListener("unload", windowUnload, false);
} else if (window.attachEvent) {
 window.attachEvent("onload", windowLoad);
 window.attachEvent("onunload", windowUnload);
}
</script>
</head>
<body>
<div id="scrolldiv">
<pre>
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
</pre>
</div>
</body>
</html>

okunev2 · September 15, 2007

этот код Вы взяли из моего примера?

это модифицировали: http://dump.ru/files/j/j41006430/ ?

В IE и Мозиле он работает, а в Опере нет

Вот Ява, которую хотел переделать по вашему примеру, но увы не могу понять что за что отвечает, может надо проще:

function StripValue(value)
{
 value = value + '';
 //alert(value);
 tmp_length = value.length;
 value = value.substring(0, tmp_length-2);
 return value;
}
var BorderElement = document.getElementById('photo_place');
var isMSIE = document.attachEvent != null;
var isGecko = !document.attachEvent && document.addEventListener;

var DraggingItem = new Object();

function StartDrag (event, _this, _afteraction,BorderElement)
{
 DraggingItem.This = _this;
 //Begin Of Additional parts of function for Unipak
 DraggingItem.Image = document.getElementById('scroll_image');
 DraggingItem.Place = document.getElementById('scrolling_place');
 DraggingItem.PlaceIn = document.getElementById('scrolling_place_in');
 DraggingItem.PlaceIn.Width = StripValue(DraggingItem.PlaceIn.style.width);
 //End Of Additional parts of function for Unipak
 DraggingItem.AfterAction = _afteraction;
 DraggingItem.BorderElement = document.getElementById(BorderElement);
 DraggingItem.BorderWidth = StripValue(DraggingItem.BorderElement.style.width);
 DraggingItem.BorderHeight = StripValue(DraggingItem.BorderElement.style.height);
 DraggingItem.BaseWidth = StripValue(DraggingItem.This.style.width);
 DraggingItem.BaseHeight = StripValue(DraggingItem.This.style.height);
 //Begin Of Additional parts of function for Unipak
 //Получаем шаг сдвига внутреннего модуля на каждый пиксел сдвига ползунка
 DraggingItem.Minus = DraggingItem.PlaceIn.Width - DraggingItem.BorderWidth;
 if(DraggingItem.Step < 0) DraggingItem.Step = 0;
 else DraggingItem.Step = DraggingItem.Minus/DraggingItem.BorderWidth;

 //alert(DraggingItem.PlaceIn.Width + ' - ' + DraggingItem.BorderWidth + ' = ' + DraggingItem.Minus + ' | step = ' + DraggingItem.Step);
 //End Of Additional parts of function for Unipak
 var position = new Object();
 if (isMSIE)
 {
 position.x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
 position.y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
 }
 if (isGecko)
 {
 position.x = event.clientX + window.scrollX;
 position.y = event.clientY + window.scrollY;
 }
 //alert(DraggingItem.id);

 DraggingItem.cursorStartX = position.x;
 DraggingItem.StartLeft = parseInt (DraggingItem.This.style.left);
 if (isNaN (DraggingItem.StartLeft)) DraggingItem.StartLeft = 0;

 DraggingItem.cursorStartY = position.y;
 DraggingItem.StartTop = parseInt (DraggingItem.This.style.top);
 if (isNaN (DraggingItem.StartTop)) DraggingItem.StartTop = 0;


 if (isMSIE)
 {
 document.attachEvent ("onmousemove", ProceedDrag);
 document.attachEvent ("onmouseup", StopDrag);
 window.event.cancelBubble = true;
 window.event.returnValue = false;
 }
 if (isGecko)
 {
 document.addEventListener ("mousemove", ProceedDrag, true);
 document.addEventListener ("mouseup", StopDrag, true);
 event.preventDefault();
 }
}

function ProceedDrag (event)
{
 var position = new Object();
 //alert(DraggingItem.Step);
 if(DraggingItem.Step < 0) return;
 if (isMSIE) {
 position.x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
 position.y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
 }
 if (isGecko)
 {
 position.x = event.clientX + window.scrollX;
 position.y = event.clientY + window.scrollY;
 }
 document.getElementById('scroll_left').style.display = 'none';
 document.getElementById('scroll_right').style.display = 'none';
 var nextX = DraggingItem.StartLeft + position.x - DraggingItem.cursorStartX;
 if (nextX < -150) nextX = -150;
 DraggingItem.Image.src = 'images/scroll.gif';
 if(nextX >= DraggingItem.BorderWidth - DraggingItem.BaseWidth)
 {
 DraggingItem.Image.src = 'images/scroll_right.gif';
 //alert('change');
 i = 0;
 nextX = DraggingItem.BorderWidth - DraggingItem.BaseWidth;
 //window.status = 'Coords' + nextX + '(' + DraggingItem.BorderWidth + '-' + DraggingItem.BaseWidth + ')';
 }
 if(nextX < 0) {
 nextX = 0;
 DraggingItem.Image.src = 'images/scroll_left.gif';
 }
 DraggingItem.This.style.left = nextX + "px";
 DraggingItem.PlaceIn.style.left = 0 - nextX*DraggingItem.Step + "px";
 //alert(DraggingItem.PlaceIn.style.left);


 var nextY = DraggingItem.StartTop + position.y - DraggingItem.cursorStartY;
 if (nextY > 360) nextY = 360;

 if(nextY > DraggingItem.BorderHeight - DraggingItem.BaseHeight)
 {
 nextY = DraggingItem.BorderHeight - DraggingItem.BaseHeight;

 //window.status = 'Coords' + nextX + '(' + DraggingItem.BorderWidth + '-' + DraggingItem.BaseWidth + ')';
 }
 if(nextY < 0) nextY = 0;

 DraggingItem.This.style.top = nextY + "px";

 if (isMSIE)
 {
 window.event.cancelBubble = true;
 window.event.returnValue = false;
 }
 if (isGecko) event.preventDefault();
}

function StopDrag (event)
{
 if (isMSIE)
 {
 document.detachEvent ("onmousemove", ProceedDrag);
 document.detachEvent ("onmouseup", StopDrag);
 }
 if (isGecko)
 {
 document.removeEventListener ("mousemove", ProceedDrag, true);
 document.removeEventListener ("mouseup", StopDrag, true);
 }

 if (DraggingItem.AfterAction) DraggingItem.AfterAction (DraggingItem.This);

 //WriteCoords();
}

function PutBack (item)
{
 item.style.zIndex = 2;;
}
function WriteCoords()
{
 //alert(el.offsetLeft);
 //alert(el.offsetTop);
 var v_x = document.getElementById('offset_x');
 var v_y = document.getElementById('offset_y');
 v_x.value = StripValue(DraggingItem.This.style.left);
 v_y.value = StripValue(DraggingItem.This.style.top);
}

Tokolist · September 17, 2007

этот код Вы взяли из моего примера?
это модифицировали: http://dump.ru/files/j/j41006430/ ?

Ну да... мне нечего делать еще разбираться в Вашем коде и если у Вас уже это есть в коде зачем было морочить мне голову?

В IE и Мозиле он работает, а в Опере нет

вставте window.alert('1');

в windowUnload

Вот Ява, которую хотел переделать по вашему примеру, но увы не могу понять что за что отвечает, может надо проще:

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

okunev2 · September 25, 2007

Все заработало, разобрался, но с этим чот не могу разобраться, вставил куда нужно, но не работает:

вставте window.alert('1');
в windowUnload

Tokolist · September 29, 2007

okunev2, а логично подумать?

Sign In

Зафиксировать положение прокрутки

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information