记得很久以前玩聊天室的时候，新的聊天内容被显示出来后，滚动条总是会滚动到聊天内容窗口的底部。不过那种聊天窗口一般都是使用frame/iframe制作的，我们可以使用其document对象的scrollTop属性来滚动窗口。如果使用TextArea来记录递增内容，怎么达到同样的效果呢？
今天下午一个同事说他的监控日志窗口是使用TextArea来做的，因为日志内容很多，也只有TextArea能保证效率。同时页面脚本还在后台以6Hz的频率在获取新的日志。他希望新的日志append到TextArea里后，TextArea内的内容能滚动到底部，就像我先前说的聊天室的内容显示那样，便于用户察看新增加的日志。当时我主观的想，TextArea可能没有控制滚动条的属性吧，于是查阅了一下MSDN中TextArea方法说明的那部分，发现它有scrollIntoView这个方法，于是很高兴
。可是使用后，发现毫无效果
。这更加使我认为TextArea不能控制其内容的滚动，于是郁闷了一会儿，想出了一个诡异的方法来解决了这个问题，演示如下：
line 01 line 02 line 03 line 04 line 05 line 06 line 07 line 08 line 09 line 10 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20
<
script
language
="javascript"
>
var
count
=
20
;
function
Scroll()
{
var
txb
=
document.getElementById('txb');
txb.value
=
txb.value
+
'\r\nline '
+
(
++
count);
var
psnObject
=
txb.Span;
if
(
!
psnObject )
{
psnObject
=
document.createElement('SPAN');
txb.Span
=
psnObject;
}
txb.appendChild(psnObject);
psnObject.scrollIntoView();
}
</
script
>
由于scrollIntoView方法是滚动控件本身，所以我就添加一个span元素到TextArea底部并让其滚动，效果就达到了
。晚上回来觉得这个实现简直太别扭了，所以又仔细查了查MSDN关于TextArea的部分，结果发现TextArea元素居然有
scrollTop等一系列scroll相关属性！
于是立即晕了个半死
。
今天下午一个同事说他的监控日志窗口是使用TextArea来做的，因为日志内容很多，也只有TextArea能保证效率。同时页面脚本还在后台以6Hz的频率在获取新的日志。他希望新的日志append到TextArea里后，TextArea内的内容能滚动到底部，就像我先前说的聊天室的内容显示那样，便于用户察看新增加的日志。当时我主观的想，TextArea可能没有控制滚动条的属性吧，于是查阅了一下MSDN中TextArea方法说明的那部分，发现它有scrollIntoView这个方法，于是很高兴
。可是使用后，发现毫无效果
。这更加使我认为TextArea不能控制其内容的滚动，于是郁闷了一会儿，想出了一个诡异的方法来解决了这个问题，演示如下：
line 01 line 02 line 03 line 04 line 05 line 06 line 07 line 08 line 09 line 10 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20
效果很简单是吧，可是看看代码，是不是真的很是BT呀
。代码如下：
<
script
language
="javascript"
>
var
count
=
20
;
function
Scroll()
{
var
txb
=
document.getElementById('txb'); txb.value
=
txb.value
+
'\r\nline '
+
(
++
count);
var
psnObject
=
txb.Span;
if
(
!
psnObject )
{ psnObject
=
document.createElement('SPAN'); txb.Span
=
psnObject; }
txb.appendChild(psnObject); psnObject.scrollIntoView();}
</
script
>
由于scrollIntoView方法是滚动控件本身，所以我就添加一个span元素到TextArea底部并让其滚动，效果就达到了
。晚上回来觉得这个实现简直太别扭了，所以又仔细查了查MSDN关于TextArea的部分，结果发现TextArea元素居然有
scrollTop等一系列scroll相关属性！
于是立即晕了个半死
。
回头再想一下，为什么我一开始不去仔细的查看TextArea的属性呢？因为我觉得既然别人来问我，可能人家已经研究过了，可能实现起来确实有困难。所以在这种想法占主导地位的时候，很容易让自己从另类的角度解决问题，就是使用一些不寻常的方法。上次安装Whidbey的Beta2也是出于了同样的心理，结果使自己搞得很是麻烦
。不过这也正好又再次提醒自己，以后解决任何问题，一定要从最基本的解决方案着手，从简到繁，做到事半功倍。
本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。
