父页面用jquery.jscrollpane.js初始化滚动条后,iframe子页面滚动条并不能滚动
2017-10-09 15:51
381 查看
前段时间做项目,遇到一个问题,就是父页面用的jquery.jscrollpane.js插件初始化的滚动条在iframe加载的子页面上并不能使用鼠标滚轮进行滚动。 经过一番排查,发现当鼠标滚轮滚动到子页面上的时候,并不能够触发父页面上的鼠标滚轮事件,进而导致滚动条不能滚动。 页面布局如下图,其中1部分代表iframe页面,2部分代表父页面。 ![页面布局](https://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页面滚动鼠标滚轮来滑动父页面的滚动条了。
相关文章推荐
- 【jQuery插件】-----页面滚动时动画wow.js
- JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- js页面滚动浮动层智能定位(jQuery)实例页面
- JS与JQUERY获取页面大小、滚动条位置、元素位置
- js实现滚动条滚动到页面底部继续加载
- js与jquery获得页面大小、滚动条位置、元素位置
- js与jquery获得页面大小、滚动条位置、元素位置
- js页面滚动时层智能浮动定位实现(jQuery/MooTools)
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- aos.js超赞页面滚动元素动画jQuery动画库
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
- 当滚动条滚动到页面底部自动加载增加内容的js代码
- 原生JS页面初始化事件以及Jquery初始化页面加载事件
- JS与JQUERY获取页面大小、滚动条位置、元素位置
- js和jquery页面初始化加载函数的方法及先后顺序
- 页面动态数据的滚动效果——jquery滚动组件(vticker.js)
- 点击导航滚动条滚动到相应位置jQuery与js方法
- js与jquery获得页面大小、滚动条位置、元素位置