项目开发中遇到一个很奇怪的现象就是:随便点开一个下拉控件,包括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不跟随所在页面一起滚动的问题的更多相关文章

  1. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  2. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  3. dragloader.js帮助你在页面原生滚动下实现Pull Request操作

    dragloader.js是一个面向移动Web开发的JavaScript库,帮助开发者在使用页面原生滚动时,模拟上/下拉手势,实现Pull Request操作. 在移动设备上,一般会使用 drag d ...

  4. 分享一款页面视差滚动切换jquery.localscroll插件

    今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...

  5. h5之scrollIntoView控制页面元素滚动

    如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...

  6. vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法

    如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫 ...

  7. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  8. vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

    需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...

  9. 跳出弹窗页面禁止滚动(PC端和手机端)

    pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.stop.prevent 3.前端页面弹 ...

随机推荐

  1. 不能用notepad++编辑器编写python

    不能用notepad++编辑器编写python,因为notepad对空格支持不是很良好,会出现莫名其妙的错误!建议用vim或emacs. 有人这样解释:不要混合使用制表符和空格来缩进,因为这在跨越不同 ...

  2. p标签内容实现第二行缩进两个字体间距

    p{ word-break:normal; text-indent: -2em; margin-left: 2em;} <p> p标签实现自动换行:p标签实现自动换行:p标签实现自动换行: ...

  3. (后端)Spring手动回滚事务

    百度上查资料获得的 throw new RuntimeException(); 或者  TransactionAspectSupport.currentTransactionStatus().setR ...

  4. [20190219]那个更快(11g).txt

    [20190219]那个更快(11g).txt --//前几天测试11g Query Result Cache RC Latches时,链接http://blog.itpub.net/267265/v ...

  5. mysql 数据库 命令行的操作——对表和字段的操作

    一.对表的操作 1.查看所有表 show tables: 2.创建表 create table 表名(字段1 类型1 约束1 ,字段2 类型2 约束2): 3.修改表的名字 rename table ...

  6. python 制作一对一聊天

    用到的参考资料 https://blog.csdn.net/jia666666/article/details/81624550 https://blog.csdn.net/jia666666/art ...

  7. appium+robotframework常见技巧总结

    1.如何输入中文 方法: 在open application参数最后,新增unicodeKeyboard=True    resetKeyboard=True:不加入这两个参数时,中文无法输入 2.如 ...

  8. 聚类——KFCM

    聚类——认识KFCM算法 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 一.KFCM概述 KFCM:基于核的改进的模糊c均值聚类算法.它是通过核函数将 ...

  9. python3编写网络爬虫17-验证码识别

    一.验证码识别 1.图形验证码的识别 识别图形验证码需要 tesserocr 库 OCR技术识别(光学字符识别,是指通过扫描字符,然后通过其形状将其翻译成电子文本的过程.)例如 中国知网注册页面 ht ...

  10. [WeChall] Training: Crypto - Caesar I (Crypto, Training)

    Training: Crypto - Caesar I (Crypto, Training) Crypto - Caesar I As on most challenge sites, there a ...