Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скроллинг чата (https://javascript.ru/forum/misc/54518-skrolling-chata.html)

porezon 20.03.2015 15:29

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

<script type="text/javascript">
window.onload = function(){
   var scrollinDiv = document.getElementById('responce');
   setInterval(function() {          
        scrollinDiv.scrollTop = 9999;
   }, 3000);
}

</script>

<div id="responce"></div>

demoniqus 20.03.2015 15:32

Напиши человеческим языком, что делает эта функция и найдешь причину.

porezon 20.03.2015 15:57

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

demoniqus 20.03.2015 16:00

http://javascript.ru/setInterval
Первое же предложение в описании

skrudjmakdak 20.03.2015 16:16

если вручную прокручиваешь до конца, то при добавлении сообщения будет идти автоскролл. если нет то нет)
<!DOCTYPE HTML>
<html>
<head>
	<title>example</title>
	<style>
.msg {
  padding: 5px;
  margin: 5px;
  border: 1px solid silver;
}
	</style>
</head>
<body>
  <div style="width: 200px; height: 300px; border: 1px solid black; overflow-y: scroll;" onscroll="scroll(this);">
	<div class="msg">aguadg uydg uerygtuy eguygauyer gauery guae aueaer</div>
	<div class="msg">aguadg uydg uerygtuy eguygauyer gauery guae aueaer</div>
	<div class="msg">aguadg uydg uerygtuy eguygauyer gauery guae aueaer</div>
	<div class="msg">aguadg uydg uerygtuy eguygauyer gauery guae aueaer</div>
	<div class="msg">aguadg uydg uerygtuy eguygauyer gauery guae aueaer</div>
	<div class="msg">aguadg uydg uerygtuy eguygauyer gauery guae aueaer</div>
	<div class="msg">aguadg uydg uerygtuy eguygauyer gauery guae aueaer</div>
	<div class="msg">aguadg uydg uerygtuy eguygauyer gauery guae aueaer</div>
	<div class="msg">aguadg uydg uerygtuy eguygauyer gauery guae aueaer</div>
  </div>
  <script>
var auto = false
function scroll (ths) {
	auto = ths.scrollTop + ths.clientHeight == ths.scrollHeight;
}

var div = document.querySelector('div'), i = 0;
setInterval(function () {
	var newMsg = document.createElement('div');
	newMsg.innerHTML = 'aguadg uydg uerygtuy eguy ' + (++i);
	newMsg.setAttribute('class', 'msg');
	
	div.appendChild(newMsg);
	if (auto) {
		div.scrollTop = div.scrollHeight;
	}
}, 1000);
  </script>
</body>
</html>

porezon 20.03.2015 20:54

больше спасибо. Самый лучший способ я думаю. Только как бы сделать чтоб сразу скрол был снизу

ruslan_mart 20.03.2015 21:32

Цитата:

Сообщение от porezon
Только как бы сделать чтоб сразу скрол был снизу

scrollinDiv.scrollTop = 9999;

porezon 20.03.2015 21:33

а как к выше указаному коду прикрепить? а то я совсем тю-тю

danik.js 20.03.2015 22:21

Зачем тут интервал вообще? Вы че, всей толпой с ума посходили?

Алгоритм самый адекватный какой? Перед появлением нового сообщения смотрим - если скролл находится в самом низу - добавляем сообщение и докручиваем скролл. Иначе просто добавляем сообщение, оставляя скролл как есть (можно какую-нибудь нотификацию сделать, как в скайпе типа).
А вы хуетой страдаете. Обсуждаете костыль, да еще и "самым лучшим способом" его называете :))

porezon 23.03.2015 11:10

еше есть варианты как сделать? желательно готовые


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