js浮动弹出层定位的问题，有源码

问题很简单，看下面的代码，为何拖动DIV的滚动条后，定位就不准确了？<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>定位</title>
</head>
<script>
var swtemp=0,objtemp;function getobj(o){//获取对象
    return document.getElementById(o)
}function hiddiv(e,inputid){//隐藏层
    e=e||window.event;
    ev=e.target||e.srcElement;
    v=ev.innerText||ev.textContent;
    if (v!="clear")
        {getobj(inputid).value=v;}
    else 
        {getobj(inputid).value=""}
    getobj(inputid+"mydiv").style.display="none";
}function crertdiv(_parent,_element,_id,_css){//创建层
    var newObj=document.createElement(_element);
    if(_id && _id!=""){newObj.id=_id;}
    if(_css && _css!=""){newObj.setAttribute("style",_css);newObj.style.cssText = _css;}
    if(_parent && _parent!=""){
        var theObj=getobj(_parent);
        var parent = theObj.parentNode;
        if(parent.lastChild == theObj)
            {theObj.appendChild(newObj);}
        else
            {theObj.insertBefore(newObj, theObj.nextSibling);}
    }else{document.body.appendChild(newObj);}
}function showdiv(inputid,inputtext,lnW,lnH){//显示层
   if (swtemp==1){getobj(objtemp+"mydiv").style.display="none";}
if (!getobj(inputid+"mydiv")){//若尚未创建就建之
    if (lnW!=0 && lnH!=0)
{
var lcwhcss="width:"+lnW+"px;height:"+lnH+"px;";
}else{
var lcwhcss=""
}
var divcss=lcwhcss+"background-color:#FFFFFF;OVERFLOW:auto;z-index:99;border:1px solid #000000;font-size:12px;position:absolute;left:"+(getOffsetLeft(getobj(inputid)))+"px;top:"+(getOffsetTop(getobj(inputid))+25)+"px"
crertdiv("","div",inputid+"mydiv",divcss);//创建层"mydiv"
    }
    getobj(inputid+"mydiv").innerHTML=inputtext;
    var newdiv=getobj(inputid+"mydiv");
    newdiv.onclick=function(){hiddiv(event,inputid);}
    newdiv.onblur=function(){this.style.display="none";}
    newdiv.onmouseover=function(){this.focus();}
newdiv.style.display="block";
    swtemp=1;
    objtemp=inputid;
}

function getOffsetLeft(obj){ //获取位置Left
   var iOffsetLeft=obj.offsetLeft;
   while(obj = obj.offsetParent){
       iOffsetLeft += obj.offsetLeft;
   }
   return iOffsetLeft;
}
function getOffsetTop(obj){ //获取位置Top
   var iOffsetTop =obj.offsetTop;
   while(obj = obj.offsetParent){
       iOffsetTop+=obj.offsetTop;
   }
   return iOffsetTop;
}
</script>
<body><div style="position:absolute;width:350px;height:100px;border:1px solid #ccc;overflow:auto;">
  <table>
    <tr height=30><td><input id="input1" type="text" onclick="showdiv('input1','welcome1',200,100)" value="点击弹出1"></td></tr>
    <tr height=30><td><input id="input2" type="text" onclick="showdiv('input2','welcome2',200,100)" value="点击弹出2"></td></tr>
    <tr height=30><td><input id="input3" type="text" onclick="showdiv('input3','welcome3',200,100)" value="点击弹出3"></td></tr>
    <tr height=30><td><input id="input4" type="text" onclick="showdiv('input4','welcome4',200,100)" value="点击弹出4"></td></tr>
    <tr height=30><td><input id="input5" type="text" onclick="showdiv('input5','welcome5',200,100)" value="点击弹出5"></td></tr>
</table>
</div>
</body>
</html>

解决方案 »

  1.   

    怎么个不正确啊？如果你想 div 随着滚动条 滚动，需要在
    onscroll 中重新设置坐标撒
      

  2.   

    多谢1楼回复！
    我的意思是，当拖动DIV的滚动条后，再单击弹出的divbox就跑到下面去了(不在触发它的那个文本框的附近)。
      

  3.   

    把DIVBOX放到拖动的对应的DIV里面 再加上一个position:absolute  试试
      

  4.   

    保证DIV是在ROOT ELEMENT下，至少要和SCROLLABLE的同级，保证POSITION ABSOLUTE