JavaScript: div scrollbar.

[proba]

Здравейте.
Работя по един чат.
И информацията я извеждам в един div с id='view_ajax' , като съм задал overflow: auto;

Извеждам записите от базата данни като най-новите се появяват най-отдолу.
Въпросът ми е как scrollbar-a винаги да стой най-долу а не качен горе (и когато се напише нещо ново , пак да слиза надолу).
Ще дам пример с screenshot.

Ето как е сега:
http://store.picbg.net/pubpic/D9/EE/53ea615f0080d9ee.png

А ето как трябва да стане:
http://store.picbg.net/pubpic/8D/39/6ee30a63ecba8d39.png

Преди ми бяха дали един код:

document.getElementById('view_ajax').scrollTop = document.getElementById('view_ajax').scrollHeight;

Но не се получава с този код.

Дано някой помогне. Благодаря предварително

 

[adrian]

Преди много време съм давал това на някого:

var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;

Източник

 

[proba]

Нещо не се получава.
Смених divExample с view_ajax , но не се получава.. А и трябва да може да се мести и нагоре за да си четеш старата хронология (примерно).

 

[adrian]

Между <head> и </head> трябва да имаш:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" src="text/javascript"></script>
<script src="text/javascript">
$(function(){
var objDiv = document.getElementById("view_ajax");
objDiv.scrollTop = objDiv.scrollHeight;
});
</script>

после в css примерно:

#view_ajax { height: 100px; overflow: auto; }

и после:

<div id="view_ajax">
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />

asdasd<br />
asdasd<br />asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />

</div>

 

[shterev]

Защо не обърнеш записите и най-новите да са ти горе?

 

[proba]

Защото идеята е да се получи както в skype , а не да е отгоре.
И дори само с този код:

<html>
<head>
<title>Test div</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" src="text/javascript"></script>
<script src="text/javascript">
$(function(){
var objDiv = document.getElementById("view_ajax");
objDiv.scrollTop = objDiv.scrollHeight;
});
</script>
<style>
#view_ajax { height: 100px; overflow: auto; }
</style>
</head>
<body>
<div id="view_ajax">
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
</div>
</body>
</html>

Пак не работи.
Някаква идея защо не се получава... ?

 

[adrian]

Никаква идея защо не работи, копирах твоя код и не ми работеше и на мен.

Ето това го написах преди малко и работи:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test div</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var objDiv = document.getElementById("view_ajax");
objDiv.scrollTop = objDiv.scrollHeight;
})
</script>
<style type="text/css">
#view_ajax { height: 200px; overflow: auto; width: 200px; }
</style>
</head>
<body>
<div id="view_ajax">
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
</div>
</body>
</html>

 

[proba]

Получи се , благодаря