JS实现当前编辑行自动滚动至div显示区域

最近在正在做的会计系统实施过程中，客户要求在录入凭证分录时，实现每次录入的分录自动选中，并且如果分录在其所在的div隐藏区域时，将其滚动至显示区域。由于先前已经实现JS控制的当前行高亮显示的功能，因此，只需实现当前行的自动滚动。考虑到所有的凭证分录信息都放在div内，因此可以借助JavaScript控制div的某些属性实现，google的结果表明，将scrollTop与offsetTop、offsetHeight共同使用，可以实现此功能。

由于用户每次编辑完一条分录，系统都自动保存，因此会有保存当前分录信息的要求，而每个分录的id是唯一的，此处使用“curItemId”属性来记录当前编辑的凭证分录id，在整个文档load完毕之后，将每行种隐藏的“itemId”与“curItemId”比较，如果相同，则设置此行被选中，并获取默认情况下此行的“offsetTop”，同时与用外层div的“offsetTop”与“offsetHeight”属性值之和比较，如果当前行的offsetTop>外层div的offsetTop+offsetHeight，说明此行被隐藏显示了，需要将外层div的scrollTop向下移动，直至当前行移动到外层div的显示区域。具体实现代码如下：
function loadedOprt() { //onload事件 var curRowObj = null; //当前行 var curItemId = document.myform.curItemId.value; //当前的凭证分录id var itemTbObj = document.getElementById("credenceItem"); //包含item的table对象 if(itemTbObj && itemTbObj.rows.length > 0) { for(var i=0; i<itemTbObj.rows.length; i++) { var itemId = document.getElementsByName("itemId")[i].value; // 科目ID if(curItemId && (curItemId == itemId)) { curRowObj = itemTbObj.rows[i]; break; } } dispHelpInfo(curRowObj); //正在操作的当前行，相当于触发onclick事件 } var divObj = document.getElementById("credenceContent"); var divTop = divObj.offsetTop + divObj.offsetHeight; if(curRowObj) { var curTop = curRowObj.offsetTop; if(curTop > divTop) { divObj.scrollTop += (curTop - divTop) + divTop; } } } function loadedOprt() { //onload事件 var curRowObj = null; //当前行 var curItemId = document.myform.curItemId.value; //当前的凭证分录id var itemTbObj = document.getElementById("credenceItem"); //包含item的table对象 if(itemTbObj && itemTbObj.rows.length > 0) { for(var i=0; i<itemTbObj.rows.length; i++) { var itemId = document.getElementsByName("itemId")[i].value; // 科目ID if(curItemId && (curItemId == itemId)) { curRowObj = itemTbObj.rows[i]; break; } } dispHelpInfo(curRowObj); //正在操作的当前行，相当于触发onclick事件 } var divObj = document.getElementById("credenceContent"); var divTop = divObj.offsetTop + divObj.offsetHeight; if(curRowObj) { var curTop = curRowObj.offsetTop; if(curTop > divTop) { divObj.scrollTop += (curTop - divTop) + divTop; } } } 〈body onLoad="loadedOprt()"〉

顺便介绍下scrollTop、offseTop等属性的意义，以便查阅

top属性仅仅在对象的定位(position)属性被设置时可用。否则，此属性设置会被忽略。
posTop的数值其实和top是一样的，但区别在于，top固定了元素单位为px，而posTop只是一个数值，因此一般使用posTop来进行运算。
scrollTop是元素的垂直滚动条距离元素最顶端的距离
offsetHeight是自身元素的高度，scrollHeight是 自身元素的高度+隐藏元素的高度。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/cyq1984/archive/2009/10/15/4675091.aspx