项目开发中遇到一个很奇怪的现象就是:随便点开一个下拉控件,包括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. 深入理解Java虚拟机02--Java内存区域与内存溢出异常

    一.概述 我们在进行 Java 开发的时候,很少关心 Java 的内存分配等等,因为这些活都让 JVM 给我们做了.不仅自动给我们分配内存,还有自动的回收无需再占用的内存空间,以腾出内存供其他人使用. ...

  2. android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具

    Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面 ...

  3. 算法: 包含min函数的栈

    * @Description 包含min函数的栈* @问题:定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)).* @思路: 1:Stack 类中的p ...

  4. 洗礼灵魂,修炼python(79)--全栈项目实战篇(7)—— 多级目录菜单之地址管理系统升级版

    要求: 1.在上一篇的地址管理系统的基础上做升级改动 2.添加增删改的功能 3.尽量的贴近生活常识中的地址管理 分析: 需求不用多说了,干就完了 相关文件源码地址:github 这次由于要有增删改的操 ...

  5. Java入门(七):方法

    方法,在日常生活中可以理解成解决问题或处理事情的技巧,一个方法的形成,需要思考和分析,从而形成一步一步的步骤,最后在实际执行过程中验证自己的思路.在Java中,方法的形成亦是如此. 方法,指用于封装一 ...

  6. Lingo求解线性规划案例3——混料问题

    凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/  某糖果厂用原料A.B和C按不向比率混合加工而成甲.乙.丙三种糖果(假设混合加工中不损耗原料).原料A.B.C ...

  7. Sudoku 小项目

    Sudoku 小项目 - 软工第二次作业 Part 1 · 项目相关 Github 地址: https://github.com/TheSkyFucker/Sudoku 项目的更多信息以及所有开发文档 ...

  8. Go学习笔记08-包

    Go学习笔记08-包 Go语言 封装 包 封装 CamelCase命名规则 首字母大写:public 首字母小写:private 包 一个目录即一个包 main包为可执行入口,只能有一个main包 为 ...

  9. 《生命》第三集:Mammals (哺乳动物)

    南极零下四十度的情况下,威德尔海豹能深潜到冰下捕食,并且教自己的小宝宝如何下水,看了这个才知道,海豹居然是哺乳动物,小海豹看着挺萌的. 长鼻鼩是一种很活跃的生物,而且会自己设计路线,建立迷宫,帮助自己 ...

  10. 【Linux基础】VI 编辑器基本使用方法

    vi编辑器是所有Unix及Linux系统下标准的编辑器.对Unix及Linux系统的任何版本,vi编辑器是完全相同的,它是Linux中最基本的文本编辑器. 第一章vi的三种模式 第二章vi文本编辑器 ...