记得很久以前玩聊天室的时候，新的聊天内容被显示出来后，滚动条总是会滚动到聊天内容窗口的底部。不过那种聊天窗口一般都是使用frame/iframe制作的，我们可以使用其document对象的scrollTop属性来滚动窗口。如果使用TextArea来记录递增内容，怎么达到同样的效果呢？
今天下午一个同事说他的监控日志窗口是使用TextArea来做的，因为日志内容很多，也只有TextArea能保证效率。同时页面脚本还在后台以6Hz的频率在获取新的日志。他希望新的日志append到TextArea里后，TextArea内的内容能滚动到底部，就像我先前说的聊天室的内容显示那样，便于用户察看新增加的日志。当时我主观的想，TextArea可能没有控制滚动条的属性吧，于是查阅了一下MSDN中TextArea方法说明的那部分，发现它有scrollIntoView这个方法，于是很高兴
。可是使用后，发现毫无效果
。这更加使我认为TextArea不能控制其内容的滚动，于是郁闷了一会儿，想出了一个诡异的方法来解决了这个问题，演示如下：
<
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不能控制其内容的滚动，于是郁闷了一会儿，想出了一个诡异的方法来解决了这个问题，演示如下：
效果很简单是吧，可是看看代码，是不是真的很是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/，如需转载请自行联系原博主。
