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

http://blog.youkuaiyun.com/cyq1984/archive/2009/10/15/4675091.aspx
最近在正在做的会计系统实施过程中，客户要求在录入凭证分录时，实现每次录入的分录自动选中，并且如果分录在其所在的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的显示区域。具体实现代码如下：

view plain copy to clipboard print ?

1. function loadedOprt() { //onload事件  
2.  var curRowObj = null; //当前行  
3.  var curItemId = document.myform.curItemId.value; //当前的凭证分录id  
4.  var itemTbObj = document.getElementById("credenceItem"); //包含item的table对象  
5.  if(itemTbObj && itemTbObj.rows.length > 0) {  
6.   for(var i=0; i<itemTbObj.rows.length; i++) {  
7.    var itemId = document.getElementsByName("itemId")[i].value; // 科目ID  
8.    if(curItemId && (curItemId == itemId)) {  
9.     curRowObj = itemTbObj.rows[i];  
10.     break;  
11.    }  
12.   }  
13.   dispHelpInfo(curRowObj); //正在操作的当前行，相当于触发onclick事件  
14.  }  
15.  var divObj = document.getElementById("credenceContent");  
16.  var divTop = divObj.offsetTop + divObj.offsetHeight;  
17.  if(curRowObj) {  
18.   var curTop = curRowObj.offsetTop;  
19.   if(curTop > divTop) {  
20.    divObj.scrollTop += (curTop - divTop) + divTop;  
21.   }  
22.  }  
23. }  

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是 自身元素的高度+隐藏元素的高度。