父页面用jquery.jscrollpane.js初始化滚动条后,iframe子页面滚动条并不能滚动
来源:互联网 发布:linux vi命令如何退出 编辑:程序博客网 时间:2024/06/08 14:16
前段时间做项目,遇到一个问题,就是父页面用的jquery.jscrollpane.js插件初始化的滚动条在iframe加载的子页面上并不能使用鼠标滚轮进行滚动。经过一番排查,发现当鼠标滚轮滚动到子页面上的时候,并不能够触发父页面上的鼠标滚轮事件,进而导致滚动条不能滚动。页面布局如下图,其中1部分代表iframe页面,2部分代表父页面。![页面布局](http://img.blog.csdn.net/20171010092221471?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvV1VBSU5JRlU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)解决这个问题就要从根本的鼠标监听滚轮事件下手,思路是监听iframe子页面鼠标滚动事件,然后触发父页面初始化的鼠标滚动事件,让它动起来。火狐浏览器对鼠标滚轮的监听与其它浏览器不一样,这里需要特殊注意。
1. 在iframe加载的子页面上,注册鼠标滚轮监听事件
$(function(){ //接着利用我们自己封装的函数给div绑定事件, var oDiv = document.getElementById('PluginShowLicese'); addEvent(oDiv,'mousewheel',onMouseWheel); addEvent(oDiv,'DOMMouseScroll',onMouseWheel); });
- 实现鼠标滚轮事件
function onMouseWheel(ev) {/*当鼠标滚轮事件发生时,执行一些操作*/ var ev = ev || window.event; var down = true; // 定义一个标志,当滚轮向下滚时,执行一些操作 down = ev.wheelDelta?(ev.wheelDelta<0):(ev.detail>0); if(down){//向下滚动 window.parent.scrollToYMy(30,false); }else{//向上滚动 window.parent.scrollToYMy(-30,false); } if(ev.preventDefault){/*FF 和 Chrome*/ ev.preventDefault();// 阻止默认事件 } return false; } //添加监听事件 function addEvent(obj,xEvent,fn) { if(obj.attachEvent){ obj.attachEvent('on'+xEvent,fn); }else{ obj.addEventListener(xEvent,fn,false); } }
- 修改jquery.jscrollpane.j源码
(1)修改$.fn.jScrollPane.defaults 这个方法,新增三个参数
scrollToYMy : false, destYMy : 30, animateMy : false,
(2)修改initialise这个方法,在settings = s;后新增如下代码
if (settings.scrollToYMy) { scrollToYByMyself(settings.destYMy, settings.animateMy); return;}
(3)实现scrollToYByMyself方法
//新增外部调用接口function scrollToYByMyself(deltaY, animate){ var destY = contentPositionY() + Math[deltaY<0 ? 'floor' : 'ceil'](deltaY), percentScrolled = destY / (contentHeight - paneHeight); positionDragY(percentScrolled * dragMaxY, animate);}
通过以上的修改,就可以实现在iframe页面滚动鼠标滚轮来滑动父页面的滚动条了。
阅读全文
1 0
- 父页面用jquery.jscrollpane.js初始化滚动条后,iframe子页面滚动条并不能滚动
- iframe页面滚动条置顶
- extjs/jquery/js 操作页面滚动条
- jquery控制页面滚动条
- 把iframe的滚动条作为页面滚动条
- 用JS锁定页面滚动条
- jScrollPane 滚动条
- JScrollPane滚动条设置
- JScrollPane创建滚动条
- JScrollPane 双滚动条
- 页面打开滚动条
- 页面元素滚动条
- HTML 页面滚动条
- 实现页面滚动条
- 禁用页面滚动条
- 设置页面滚动条
- 页面滚动条翻页
- 隐藏页面滚动条
- 一次完整的HTTP请求过程。
- eclipse插件安装问题
- c语言操作符
- 1001. Reverse Root
- spring 发送简单邮件Javamail
- 父页面用jquery.jscrollpane.js初始化滚动条后,iframe子页面滚动条并不能滚动
- JDBCUtils
- FFmpeg将MP4视频切割成ts文件
- Oracle笔记二:SQLPlus命令
- java鬼混笔记:在同一台电脑上配置多个tomcat(解压版)
- 400 bad request
- Android Handler 定时任务
- 详解Spring事件驱动模型
- Activiti 流程实例、任务的执行