实例名称

textarea内实现行的翻页效果

实例描述

textareaa中内容太多时，会出现滚动条，以支持对内容的浏览。本例学习如何通过两个按钮，实现行的上下滚动。

实例代码

html head title表格显示数据表记录/title /head body textarea id=myTxt style="overflow:hidden" width="20" height="20"测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

/textarea button onmouseup=stop onmousedown=up上翻/buttonbutton onmousedown=down onmouseup=stop下翻/button script var Timer=null; function up "scrollBardown" //调用滚动条，实现上翻 Timer=setTimeout"up"，100 function down "scrollBarUp" //调用滚动条，实现下翻 Timer=setTimeout"down"，100 function stop clearTimeoutTimer //清空定时器/script /body /html

运行效果

难点剖析

本例中使用了textarea中的“doscroII”方法，以实现滚动条的手动拖动效果。其中“scrollBardown”表示将滚动条向上翻，“scrollBarup”表示将滚动条向下翻。

源码下载