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;
  }
 }
}

〈body onLoad="loadedOprt()"〉

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

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