Vimeo iFrame在Firefox上窃取鼠标滚轮事件

Question

Vimeo iFrame在Firefox上窃取鼠标滚轮事件

dig*_*dio 8 javascript mouse iframe firefox mousewheel

我在这里做了这个例子:http://jsbin.com/pokahec/edit？html,output

// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window,document) {

var prefix = "", _addEventListener, onwheel, support;

// detect event model
if ( window.addEventListener ) {
    _addEventListener = "addEventListener";
} else {
    _addEventListener = "attachEvent";
    prefix = "on";
}

// detect available wheel event
support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
          document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
          "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox

window.addWheelListener = function( elem, callback, useCapture ) {
    _addWheelListener( elem, support, callback, useCapture );

    // handle MozMousePixelScroll in older Firefox
    if( support == "DOMMouseScroll" ) {
        _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
    }
};

function _addWheelListener( elem, eventName, callback, useCapture ) {
    elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
        !originalEvent && ( originalEvent = window.event );

        // create a normalized event object
        var event = {
            // keep a ref to the original event object
            originalEvent: originalEvent,
            target: originalEvent.target || originalEvent.srcElement,
            type: "wheel",
            deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
            deltaX: 0,
            deltaZ: 0,
            preventDefault: function() {
                originalEvent.preventDefault ?
                    originalEvent.preventDefault() :
                    originalEvent.returnValue = false;
            }
        };

        // calculate deltaY (and deltaX) according to the event
        if ( support == "mousewheel" ) {
            event.deltaY = - 1/40 * originalEvent.wheelDelta;
            // Webkit also support wheelDeltaX
            originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
        } else {
            event.deltaY = originalEvent.detail;
        }

        // it's time to fire the callback
        return callback( event );

    }, useCapture || false );
}

Run Code Online (Sandbox Code Playgroud)

})(窗口,文档);

您可以在Firefox中测试滚动事件被触发,除非超过vimeo iframe(我猜任何iFrame)

在iframe上有什么解决方案吗？

PS - 我想在自定义滚动条中使用它

Answer 1

hal*_*ors 6

这基本上是设计的.您的代码应该完全不知道用户在IFRAME中做了什么(特别是来自YouTube等不同来源的用户 - 这是Web安全架构的一部分,正如同源策略所强制的那样.)

现在,即使在跨源案例中,如果帧本身不滚动,浏览器也可以选择让滚动影响帧的祖先.此滚动应该在顶部文档上没有触发任何事件的情况下发生 - 如果您滚动到此IFRAME的底部并继续滚动,请参阅Chrome的行为:http: //jsfiddle.net/8cj0dofx/1/ HTML:

<iframe src="data:text/html,<body style='background:grey;height:550px'>Hello" seamless></iframe>
<div style="height:100px">Hello</div>

Run Code Online (Sandbox Code Playgroud)

JS:

document.addEventListener('DOMMouseScroll', function(e){
    document.getElementsByTagName('div')[0].firstChild.data += ' ' + e.type
});

document.addEventListener('mousewheel', function(e){
    document.getElementsByTagName('div')[0].firstChild.data += ' ' + e.type
});

Run Code Online (Sandbox Code Playgroud)

您将看到的是,当您滚动到IFRAME的末尾时,主文档将滚动,但在鼠标位于父文档上方之前不会触发任何事件.

归档时间：	10 年，7 月前
查看次数：	2582 次
最近记录：	8 年，3 月前