Question

我在这里做了这个例子：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 );
}

}）（窗口，文件）;

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

iframe上有触发事件的解决方案吗？

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

Answer 1

这基本上是设计的。您的代码应该完全不知道用户在IFRAME中做了什么（特别是来自不同来源的YouTube，例如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>

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
});

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

Answer 2

看起来这是Firefox中的一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1084121

因此可能没有一种直接的方法来处理这个问题。但由于即使没有发送动作也会产生影响，因此可以使用一种解决方法。它可能不适用于所有情况，但它应涵盖许多情况。

检测wheel event，而不是检测scroll，并使用开关检测是否单击了鼠标。如果窗口滚动并且未单击鼠标，则最有可能来自mousewheel。如果从脚本中触发它，则会出现其他情况，在这种情况下也可以轻松处理。

你不会处理的一个案例是当窗口不能再滚动时，你就不会得到这个事件。

看起来像这样：

var mouseDown = false;

function handle_wheel() {
    if (!mouseDown) {
        document.getElementById("debug-textarea").value = document.getElementById("debug-textarea").value + ' wheel';
    } else {
        document.getElementById("debug-textarea").value = document.getElementById("debug-textarea").value + ' scroll';
    }
}

window.onscroll = handle_wheel;
window.onmousedown = function () {
    mouseDown = true;
}
window.onmouseup = function () {
    mouseDown = false;
}

http://jsfiddle.net/wu9y6yua/4/

Answer 3

我遇到了同样的问题，但是具有缩放滚动功能。

由于没有黑客就无法捕获鼠标滚轮事件，我认为最好的选择是在iframe上放置一个透明的div并添加＆autoplay = 1参数在点击的vimeo / youtube网址中。

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

3 个答案: