Witam, piszę sobie taki mini czat, wszystko działa poprawnie lecz denerwuje mnie jedna rzecz, której nie umiem naprawić.
Wczytuję wiadomości za pomocą:

[HTML] pobierz, plaintext 
<script type="text/javascript">
function messages_load(){
$.get('messages.php?' + Math.random(), function(data){
	$('#messages').html(data);
});
}
$(function(){
	setInterval('messages_load()', 3000);
});
messages_load();
</script>
<div id="messages">Trwa ładowanie wiadomości...</div>
[HTML] pobierz, plaintext 

Przykład pliku messages.php:

[HTML] pobierz, plaintext 
<div id="messages2">
wiadomość 1<br />
wiadomość 2<br />
wiadomość 3<br />
...
</div>
<script type="text/javascript">document.getElementById('messages2').scrollTop=1e6</script>
[HTML] pobierz, plaintext 

Kod CSS:

[HTML] pobierz, plaintext 
#messages2{
width: 749px;
max-height: 400px;
overflow: auto;
}
[HTML] pobierz, plaintext 

Oczywiście ostatnia linijka w pliku messages.php świadczy o tym, że wiadomości są przewinięte w dół, tutaj wszystko działa.
Problem pojawia się podczas przewijania w górę, jak chce się podejżeć wiadomośc np. poprzednika która już znikła z pola widzenia. Polega on na tym, że jak widać w skrypcie wiadomości są wczytywane co 3 sekundy, jeżeli ja sobie przewinę scroll na górę to po wczytaniu (odświeżeniu) wiadomości (co 3 sekundy) on jest przesuwany w dół, co jest bardzo denerwujące jeżeli czyta się starsze wiadomości np. innych osób. Tak samo jest z zaznaczaniem tekstu, jakiś zaznaczę, a po odświeżeniu zaznaczenie znika.

W jaki sposób mógłbym to naprawić?
Pozdrawiam.

Przed wstawieniem pobraniem danych zapamiętaj pozycje scrolla, jak jest max do dołu to po wstawieniu przesuwaj diva maksymalnie w dół. Jeśl;i pozycja nie jest przesunięta max w dół to nic nie rób, ew podświetl jakąś kontrolkę.

Dzięki
A mógłbym poprosić o jakiś przykład?

tak na szybko:

[PHP] pobierz, plaintext 
<div id="container" style="width: 300px; height: 300px; overflow-y: scroll; border: 1px solid red;"></div>
	<script>
	    $(document).ready(function(){
		var c = 0, offset = 20;
 
		setInterval(function(){
			var newline = $('<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum adipiscing magna non lectus malesuada non fermentum turpis adipiscing.' + (c++) + ' </p>')
 
			$('#container').append(newline) 
			if( $("#container").prop('scrollTop') + $("#container").height() + $(newline).height() + offset >= $("#container").prop("scrollHeight")){
			    $("#container").prop({scrollTop: $("#container").prop("scrollHeight") });	
			}
		},1000)	
	    })	    
	</script>
 
[PHP] pobierz, plaintext 

nowe wiadomosci "symulowane" za pomoca setinterval()

Dzięki!
Działa idealnie tak jak chciałem

Dało by się jeszcze to przeronbić, aby wczytywało wiadomości z pliku tak jak to podałem w pierwszym poście? ;>

to juz jest bardzo latwe, probuj sam.
jesli nie bedziesz potrafil, to cos pomyslimy

Właśnie próbowałem to zrobić oczywiście najpierw, ale niestety nie wychodzi mi tak jak bym chciał, czyli zamiast odświeżać to za każdym razem plik jest dodawany do całości. Niestety w Javascript/jQuery jestem słaby.

zamien .append() na .html().

btw ladowanie calego contentu za kazdym razem to chyba nie jest najlepszy pomysl, wg mnie to powinno dzialac tak, ze klient (js) ajaxowo odpytuje serwer o nowe wiadomosci, i jesli takowe sa,
dolacza je (stad append()) na koniec diva z contentem.

mozesz tez wyrzucic scrolltop() ze swojego messages.php

edit: pisalem kiedys cos podobnego, i tam to dzialalo tak, ze js odpytujac wysylal timestamp poprzedniego zapytania, i jesli serwer znalazl cos mlodszego niz odebrany timestamp, to wlasnie to zwracal

Nawet ciekawy pomysł z tym pytaniem
Bo jak zrobiłem niedawno test i na taki czat weszło ponad 100 osób i wiadomości odświeżały się co 2s to serwer WWW nie wyrabiał i sypał: 500 Internal Server Error

Tylko to, to już wyższa szkoła jazdy... :]

jakims pomyslem na pseudo optymalizacje byloby tez zwiekszanie interwalu w momencie, kiedy serwer nie zwrocil zadnej nowej wiadomosci.

edit: niekoniecznie wyzsza, zakladajac, ze zapisujesz niedostarczone wiadomosci w db, wystarczy ze odpytasz o nieprzeczytane wiadomosci mlodsze niz timestamp

No i nie chce działać:

[PHP] pobierz, plaintext 
$(document).ready(function(){
var offset = 20;
 
setInterval(function(){
$.get('sources/messages.php?' + Math.random(), function(data){
	newline=data;
$('#container').append(newline)
if( $("#container").prop('scrollTop') + $("#container").height() + $(newline).height() + offset >= $("#container").prop("scrollHeight")){
$("#container").prop({scrollTop: $("#container").prop("scrollHeight") });
}
});
},3000)
})
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
var newline = $(data)
[PHP] pobierz, plaintext 

Nie chce to działać, próbowałem z var itp.

jakies bledy?

edit: ew dodaj przed newline console.log(data), zobaczysz co ci serwer zwraca

no i czy masz element #container, on sie u ciebie chyba #messages nazywal...

edit:

wroc, twoim sposobem (zwracanie calego contentu za kazdym razem) to i tak bedzie kupa, bo przeciez zamieniasz cala zawartosc diva ktory scrollujesz.
jesli chcesz, zeby dzialalo, musisz zrobic metoda ktora pisalem wczesniej

Nie, tutaj jest wszystko dobrze.
Chodzi o to, że po prostu wczytywane wiadomości są dopisywane cały czas
Czyli każde odświeżenie pliku to dodanie tekstu w polu diva z tego pliku:

[PHP] pobierz, plaintext 
$(document).ready(function(){
var offset = 20;
 
setInterval(function(){
$.get('sources/messages.php?' + Math.random(), function(data){
	    var newline = data;
$('#container').append(newline)
if( $("#container").prop('scrollTop') + $("#container").height() + $(newline).height() + offset >= $("#container").prop("scrollHeight")){
$("#container").prop({scrollTop: $("#container").prop("scrollHeight") });
}
});
},3000)
})
[PHP] pobierz, plaintext 

Chyba, że jest to specjalnie tak zrobione, abym mógł zrobić to co pisałeś (jeśli mogę na Ty) o dopisywaniu tylko, a nie wczytywaniu wszystkiego.
Jeżeli tak, to chyba już wiem jak to zrobić, i nawet prosto. A jak będę miał jakoś problem (odpukać) to ew. napiszę.

@edit
Ta zmienna offset jest konieczna, czy można ją zrobić jakoś automatycznie?

sa dopisywane, bo uzywasz metody append(), ktora dodaje na koniec elementu.
uzywajac html() <tak jak miales wczesniej> content zostanie zastapiony, ale na dzialanie scrolla bym raczej wtedy nie liczyl.

sprobuj zaproponowana metoda, jak bedziesz mial problemy - pisz

edit: moglbys w ogole sprobowac napisac to jako jquery plugin, ladniej by wygladalo
no i przede wszystkim przerob zwracane dane na jsony, wtedy bedziesz mogl sobie ladnie zwrocic status zapytania i inne ciekawe rzeczy

zmienna offset to ustawienie, jak daleko (mniej wiecej) od dolu diva scroll ma sie zachowywac jakby byl na samym dole.
kiedy offset byl 0 niebardzo chcialo dzialac (nie wiem czemu, stawiam na jakies marginy).
mozesz oczywiscie w warunku tam gdzie dodajesz offset dodac po prostu 20 i wyrzucic offset, ale chyba lepiej miec mozliwosc przekonfigurowania bez grzebania sie w kodzie, za duzo wtedy mozna napsuc

tam gdzie zaczyna sie css i ogolnie "przegladarka' niewiele pomoge, to juz nie moja bajka jest, wiec w tych kwestiach moge sie mylic