博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
easyui的浮动panel不跟随所在页面一起滚动的问题
阅读量:4555 次
发布时间:2019-06-08

本文共 1365 字,大约阅读时间需要 4 分钟。

  项目开发中遇到一个很奇怪的现象就是:随便点开一个下拉控件,包括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都不关闭的,我就把代码改成要循环计算的了。解决问题。

转载于:https://www.cnblogs.com/onlywujun/p/3818096.html

你可能感兴趣的文章
UVa 10450 - World Cup Noise
查看>>
Android 调用QQ登录
查看>>
Educational #39C
查看>>
threejs学习笔记(7)
查看>>
NOIP2016
查看>>
docker使用笔记
查看>>
推荐一款在IntelliJ IDEA中使用微信/QQ的插件
查看>>
github简单操作
查看>>
ZendStudio10 代码格式化 xml
查看>>
TWaver动画之雷达扫描效果
查看>>
linux压缩及vi操作
查看>>
蓝桥杯java 基础练习 FJ的字符串
查看>>
jQuery文档处理
查看>>
[国嵌攻略][119][Linux中断处理程序设计]
查看>>
upstream实现内网网站在公网访问
查看>>
排序——归并排序
查看>>
JAVA实现对服务器的访问的两种方法
查看>>
搭建GitLab的Hexo博客记录
查看>>
NYOJ 496 [巡回赛-拓扑排序]
查看>>
redis五种数据类型的使用
查看>>