overflow-y:scrollãªè¦ç´ ã‚’ä¸€ç•ªä¸‹ã¾ã§ã‚¹ã‚¯ãƒ­ãƒ¼ãƒ«ã™ã‚‹

こんにちはこんにちは…！
突然だけど今日はちょっぴりテンション低めに、
要素のスクロールについてのお時間なんです…！

• ぺろ
• ぺろぺろ
• ぺろぺろ
• ぺろぺろ
• ぺろぺろ

<div style="height:4em; overflow-y:scroll">
<ul id="peroZone">
<li>ぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
</ul>
</div>
<input type="button" value="ぺろライン追加" onclick="add()" />

↑なんかこういうやつがあって…、
ボタンを押すたびに、ぺろぺろエリアの一番下に行が追加されるような仕掛けを作りたいとき…・。

<script>
function add() {
	// 行を追加するよ
	var peroZone = document.getElementById('peroZone');
	var li = document.createElement('li');
	li.appendChild(document.createTextNode('追加されたぺろ。'));
	peroZone.appendChild(li);
}
</script>

…こんなふうに普通にJavaScriptで適当に一番下に行を追加しても、
たぶんスクロールバーは一番上にくっついたままになっちゃう…。

…

ちょっと悩んだあげく、ぼくの考えついた、あまりきれいじゃないやり方はこんな感じ…。

<div style="height:4em; overflow-y:scroll">
<ul id="peroZone">
<li>ぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
</ul>

<!-- ↓ついかしたやつ… -->
<input id="eom" type="text" style="width:1px; height:1px; disaply:none">
</div>

<input type="button" value="ぺろライン追加" onclick="add()" />

ぺろぺろエリアの最下行にダミーのinputを配置しておいて見えなくしておいて…
それで、行を追加するたびにダミーのinputをfocusしてみたり…。

<script>
function add() {
	// 行を追加するよ
	var peroZone = document.getElementById('peroZone');
	var li = document.createElement('li');
	li.appendChild(document.createTextNode('追加されたぺろ。'));
	peroZone.appendChild(li);

	// 隠しinputをfocusするよ
	document.getElementById('eom').style.display = 'inline';
	document.getElementById('eom').focus();
	setTimeout(function() { document.getElementById('eom').style.display = 'none' }, 100)
}
</script>

あとブラウザによっては、
入力欄のカーソルがちらほらと見えていたり、
表示されていない要素にfocusできなかったりするから、
focusする瞬間だけ表示するように無駄に悪あがきしてみたよ…。

(サンプルページ)
overflow-y:scrollな要素を一番下までスクロールするけど、いまいちぱっとしないサンプル

…なんかこんなのしか思いつかなかったんだけど、
もっとちゃんとするには、どうやればいいんだろうね…！

(追記)
解決しました！ ありがとう！！
詳しくはコメント欄です！