easyui的浮动panel不跟随所在页面一起滚动的问题

标签：style   blog   color   问题   cti   代码   

　　项目开发中遇到一个很奇怪的现象就是：随便点开一个下拉控件，包括combo,combobox,databox,combogird等等，都会出现点开的panel面板正常，如果页面有滚动条，一用鼠标滚轮滚动页面，panel的位置就一直固定在原来的位置，不会随着它所属的控件一起移动。由于我们项目是自己修改过easyui的，所以我怀疑的改出来的问题，我就换上原版的easyui就没这个问题了，证明怀疑是对的。

　　还发现同样一个页面，有个页面有这样的问题，有个页面没有这样的问题，这两个页面唯一的区别就是有问题的页面用easyui-layout渲染了的。一开始我以为是layout控件修改错了，但经过层层排查后发现问题不出在这里。

　　我单独建了个页面把用到的easyui控件js源码一个一个单独加载，不一下子加载全部，这样经过排除法终于确定错误是在jquery.combo.js上的问题了。然后再仔细阅读源码确定问题在showPanel这个方法上。对比改动发现原来是这么回事：

//没有改过的easyui伪代码
function showPanel(){
    //上面代码省略
    function getLeft(){...}//获得所属控件的left相对位置
    function getTop(){...}//获得所属控件的top相对位置

    //亮点来了
    (function(){
        if(panel.is(‘:visible‘)){//如果panel在显示
            panel.panel(‘move‘,{
                left:getLeft(),    
                top:getTop()    
            });//计算所属控件的位置，然后移动到那个位置
            setTimeout(arguments.callee,200);//0.2秒后再执行本方法
        }  
    })();          
} 

原来的代码只要panel打开就会不停的计算位置然后移动过去，而我们改动会的代码把这个方法只执行了一遍，没有进行循环。所以造成了这个问题。

那么为什么又和layout控件扯上关系了呢，经过排查发现，经过layout控件渲染后里面的div的样式属性overflow会变成auto,也就是说里面的div会有滚动条，而不用layout渲染的话滚动条会出现在最父级iframe级别上。而panel的定位位置是根据iframe级的相对位置而定的。所以前一种情况下，滚动是里面的div,而panel定位在全局上位置没变，所以会显现出问题，而后一种情况，滚动的时候，相当于是全局一起滚动，所以就算panel位置不变也没关系，所以没有出现这样的问题。

　　我想之前把代码改成不循环计算可能是出于性能考虑，而且也没遇到用layout渲染的情况，就这样改了。但是我认为这个性能花费并不大，因为只是打开的时候才计算，只要鼠标点其他地方panel都不关闭的，我就把代码改成要循环计算的了。解决问题。

easyui的浮动panel不跟随所在页面一起滚动的问题,布布扣,bubuko.com

easyui的浮动panel不跟随所在页面一起滚动的问题

标签：style   blog   color   问题   cti   代码   

原文地址：http://www.cnblogs.com/onlywujun/p/3818096.html