Как JS-ом крутить скрол ?

iillyyaa2 · June 20, 2011

есть вот такой код, при нажатии на "Хистори" будут подгружаться ещё сообщения, при этом скрол естественно уходит.. как его вернуть в тоже положение ? тобишь на тоже место ?

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<meta name="Description" content="" />
	<meta name="Keywords" content="" />
</head>
<body>

<style>
.msgIn {
	border-bottom: 1px solid black;
	background: #DEECEE;
}
.msgOut {
	border-bottom: 1px solid black;
	background: #D2E8F4;
}
.allMsg {
	overflow-y: scroll;
	width:400px;
	height:400px;
}
</style>
<div onclick="add_history();">histori</div>

<div class="allMsg" id="suda">
<div class="msgOut"><div>Петя</div><div>Сообщение № 74</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 75</div></div>
<div class="msgOut"><div>Петя</div><div>Сообщение № 76</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 77</div></div>
<div class="msgOut"><div>Петя</div><div>Сообщение № 78</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 79</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 80</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 81</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 82</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 83</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 84</div></div>
<div class="msgOut"><div>Петя</div><div>Сообщение № 85</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 86</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 87</div></div>
<div class="msgIn"><div>Вася</div><div>Сообщение № 88</div></div>
</div>

<div><textarea id="txt"></textarea></div>
<div><input value="Написать" type="Button" onclick="send();"></div>

<script>
var nn = 0;
function send() {
	nn++;
	var ttt = '<div class="msgOut" id="d' + nn + '"><div>Вы</div><div>' + document.getElementById('txt').value + '</div></div>'
	document.getElementById('suda').innerHTML += ttt;
	document.getElementById('d'+nn).scrollIntoView(true);
	}
function add_history() {
	var tx = '';
	nn++;	tx += '<div class="msgOut" id="d' + nn + '"><div>Хистори</div><div>' + Math.random() + '</div></div>';
	nn++;	tx += '<div class="msgOut" id="d' + nn + '"><div>Хистори</div><div>' + Math.random() + '</div></div>';
	nn++;	tx += '<div class="msgOut" id="d' + nn + '"><div>Хистори</div><div>' + Math.random() + '</div></div>';
	nn++;	tx += '<div class="msgOut" id="d' + nn + '"><div>Хистори</div><div>' + Math.random() + '</div></div>';
	nn++;	tx += '<div class="msgOut" id="d' + nn + '"><div>Хистори</div><div>' + Math.random() + '</div></div>';
	document.getElementById('suda').innerHTML = tx + document.getElementById('suda').innerHTML;
	}
</script>

Edited June 20, 2011 by iillyyaa2

Int · June 20, 2011

сдвигать scrollTo на scrollTop минус высота добавленного блока?

iillyyaa2 · June 20, 2011

в принципе все добавленные блоки имеют уникальные id и их размеры можно по 1 получить и высчитать сумму...

пойду читать доки про scrollTo и scrollTop

iillyyaa2 · June 20, 2011

что то scrollTo работает только с window, а прокрутку в блоке не крутит

iillyyaa2 · June 20, 2011

document.getElementById('suda').scrollTop = ...;

во, так можно крутить... пойду делать

psywalker · June 21, 2011

iillyyaa2

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

http://psywalker.ru/Forum/JS/Primitive/Dom-Zadachi/Scroll/#

iillyyaa2 · June 21, 2011

я вот так сделал:

function add_history() {
	nn++;
	var tx = '<div class="msgOut" id="d' + nn + '"><div>Хистори</div><div>' + Math.random() + '</div></div>';
	document.getElementById('suda').innerHTML = tx + document.getElementById('suda').innerHTML;

	var thisMyStyle = document.getElementById('d' + nn);
	thisMyStyle = thisMyStyle.currentStyle || getComputedStyle(thisMyStyle, null);
	var hhh = parseInt(thisMyStyle.height, 10);
	document.getElementById('suda').scrollTop = document.getElementById('suda').scrollTop + hhh + 1;
	}

правда в ie не работает сейчас что то не думается и другим чуть занят..

а в фф всё отлично..

Edited June 21, 2011 by iillyyaa2

Sign In

Как JS-ом крутить скрол ?

Question

iillyyaa2

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Int

Link to comment

Share on other sites

iillyyaa2

Link to comment

Share on other sites

iillyyaa2

Link to comment

Share on other sites

iillyyaa2

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

iillyyaa2

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information