滚动TextArea中内容到底部的BT方法

    记得很久以前玩聊天室的时候,新的聊天内容被显示出来后,滚动条总是会滚动到聊天内容窗口的底部。不过那种聊天窗口一般都是使用frame/iframe制作的,我们可以使用其document对象的scrollTop属性来滚动窗口。如果使用TextArea来记录递增内容,怎么达到同样的效果呢?

    今天下午一个同事说他的监控日志窗口是使用TextArea来做的,因为日志内容很多,也只有TextArea能保证效率。同时页面脚本还在后台以6Hz的频率在获取新的日志。他希望新的日志append到TextArea里后,TextArea内的内容能滚动到底部,就像我先前说的聊天室的内容显示那样,便于用户察看新增加的日志。当时我主观的想,TextArea可能没有控制滚动条的属性吧,于是查阅了一下MSDN中TextArea方法说明的那部分,发现它有scrollIntoView这个方法,于是很高兴emteeth.gif。可是使用后,发现毫无效果emcrook.gif。这更加使我认为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 
   Scroll To Bottom  

    效果很简单是吧,可是看看代码,是不是真的很是BT呀emembarrassed.gif。代码如下:

ExpandedBlockStart.gif ContractedBlock.gif < script  language ="javascript" > dot.gif
InBlock.gif
var count = 20;
InBlock.gif
function Scroll()
ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{
InBlock.gif    
var txb = document.getElementById('txb');
InBlock.gif    txb.value 
= txb.value + '\r\nline ' + (++count);
InBlock.gif    
var psnObject = txb.Span;
InBlock.gif    
if ( !psnObject )
ExpandedSubBlockStart.gifContractedSubBlock.gif    
dot.gif{
InBlock.gif        psnObject 
= document.createElement('SPAN');
InBlock.gif        txb.Span 
= psnObject;
ExpandedSubBlockEnd.gif    }

InBlock.gif    txb.appendChild(psnObject);
InBlock.gif    psnObject.scrollIntoView();
ExpandedBlockEnd.gif}

None.gif
</ script >

    由于scrollIntoView方法是滚动控件本身,所以我就添加一个span元素到TextArea底部并让其滚动,效果就达到了 emsmilep.gif。晚上回来觉得这个实现简直太别扭了,所以又仔细查了查MSDN关于TextArea的部分,结果发现TextArea元素居然有 scrollTop等一系列scroll相关属性!

    于是立即晕了个半死 yun.gif yun.gif yun.gif

    回头再想一下,为什么我一开始不去仔细的查看TextArea的属性呢?因为我觉得既然别人来问我,可能人家已经研究过了,可能实现起来确实有困难。所以在这种想法占主导地位的时候,很容易让自己从另类的角度解决问题,就是使用一些不寻常的方法。上次安装Whidbey的Beta2也是出于了 同样的心理,结果使自己搞得很是麻烦 cry_smile.gif。不过这也正好又再次提醒自己,以后解决任何问题,一定要从最基本的解决方案着手,从简到繁,做到事半功倍。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值