Форум

can2zia · #1 (**permalink**) 20.08.2009, 22:00

Ситуация следующая - есть div фиксированной высоты. В этот див с помощью jQuery каждую секунду добавляется новый текст на следующую строку. Когда кол-во строк превышает высоту дива появляется вертикальный скролл. Нужно сделать так, чтобы скролл автоматически прокручивался в самый низ при появлении каждой новой строки.
Подскажите, пожалуйста, как это можно реализовать с помощью jQuery. Впервые столкнулся с такой задачей, не знаю даже что и где искать =)

Urfin · #2 (**permalink**) 20.08.2009, 22:21

<div id="outer" style="overflow:auto; height:100px;">
	<div id="inner">
		 text
	</div>
</div>

$('#outer').scrollTop($('#inner').height())

can2zia · #3 (**permalink**) 20.08.2009, 22:58

А куда это пихать? =) Оно не работает...

$(document).ready(function msg() 
	{	
		$('#outer').scrollTop($('#inner').height());
		$('#inner').html('text<br>');
		setTimeout(msg, 1000);
	});

Urfin · #4 (**permalink**) 20.08.2009, 23:32

$(document).ready(function(){
        setInterval(msg, 1000);
		function msg() {   
			$('#inner').append('text<br>'); 
			$('#outer').scrollTop($('#inner').height());
		}
	});

can2zia · #5 (**permalink**) 20.08.2009, 23:59

Теперь таймер работает, но скрол в самый низ не опускается =)

e1f · #6 (**permalink**) 21.08.2009, 14:32

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.js" /></script>
<script type="text/javascript">
<!--
$(function(){
    setInterval(msg, 1000);
    function msg() {
        $('#outer').scrollTop($('#inner').append('text<br />').height());
    }
});
//-->
</script>
</head>
<body>
<div id="outer" style="overflow:auto; height:100px;"><div id="inner">text</div></div>
</body>
</html>

Все работает, скроллер опускается

Форум

Справочник

Discord чат

Курсы javascript