美文网首页
niceScroll 在iframe中鼠标滚轮滚动父页面不跟随

niceScroll 在iframe中鼠标滚轮滚动父页面不跟随

作者: 一沭丶 | 来源:发表于2017-10-31 11:05 被阅读592次

在iframe的页面底部。body结束标签前添加如下代码:

(function() {

    var body = document.body;
    var parent = window.parent;

    if (parent && ("createEvent" in document)) {

        var isoldie = ("documentMode" in document);  // 11-
        var ismsedge = ("msCredentials" in window);  // MS Edge 14+

        function onwheel(e) {

            var evt = document.createEvent("MouseEvents");
            evt.initEvent('wheel', true, true);
            evt.deltaMode = e.deltaMode;
            evt.deltaX = e.deltaX;
            evt.deltaY = e.deltaY;
            evt.deltaZ = e.deltaZ;
            evt.wheelDelta = e.wheelDelta;
            evt.wheelDeltaX = e.wheelDeltaX;
            evt.wheelDeltaY = e.wheelDeltaY;

            //如果父页面是$('html').niceScroll();用这个
            //parent.dispatchEvent(evt);

            //如果要使父页面的某个滚动条触发,则用下面这个,id换一下
            parent.document.getElementById('content-right').dispatchEvent(evt);
        }

        body.addEventListener("wheel",onwheel);

    }

})();

参考:https://github.com/inuyaksa/jquery.nicescroll/issues/322

相关文章

  • niceScroll 在iframe中鼠标滚轮滚动父页面不跟随

    在iframe的页面底部。body结束标签前添加如下代码: 参考:https://github.com/inuya...

  • JS实例-事件对象2

    鼠标滚轮滚动: 鼠标滚轮事件:在页面滚动鼠标滚轮弹出1:onmousewheel -> 当滚动鼠标的滚轮的时候兼容...

  • 整屏滚动 幻灯片

    整屏滚动 jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼...

  • JS中Iframe之间传值的方法

    1. 在iframe子页面中获取父页面的元素: 2. 在父页面中获取iframe子页面中的元素:

  • 如何隐藏iframe的滚动条,但依然可以页面滚动

    今天遇到一个这样的问题:网页中如何隐藏iframe中的垂直滚动条,但依然可以用滚轮实现页面滚动???我就想先把if...

  • 17_day 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 前端的整屏滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

网友评论

      本文标题:niceScroll 在iframe中鼠标滚轮滚动父页面不跟随

      本文链接:https://www.haomeiwen.com/subject/fdzvpxtx.html