Vimeo Кража плавающего фрейма колесо мыши событие на Firefox

Я сделал этот пример здесь: http://jsbin.com/pokahec/edit?html,output Vimeo Кража плавающего фрейма колесо мыши событие на Firefox

// 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?

PS - Я хочу, чтобы использовать это в пользовательской скроллинга

источник

2015-07-14 digitalzoomstudio

Это в основном дизайном. Ваш код должен быть полностью не осведомлен о том, что пользователь делает внутри IFRAME (особенно из другого источника, такого как YouTube, - это часть архитектуры безопасности Интернета, как это предусмотрено Политикой одного и того же происхождения).

Теперь даже в браузере с перекрестным происхождением браузер может выбрать, чтобы прокрутка влияла на предка фрейма, если сам кадр не прокручивается. Это скроллинг должно произойти без каких-либо событий, стреляющих на верхнем документе - см поведение Chrome, если вы прокрутите до конца этого IFRAME и держать прокрутки: 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 основной документ будет прокручиваться, но никакие события не будут срабатывать, пока мышь не окажется над родительским документом.

источник

2015-07-20 12:23:28 hallvors

так что не взломать возможно? – digitalzoomstudio

Ну, я полагаю, вы могли бы поставить прозрачный DIV поверх IFRAME, но ваш посетитель, вероятно, потеряет способность фактически воспроизводить/приостанавливать видео. – hallvors

Кроме того, если вы добавите в IFRAME атрибут «scrolling = no», браузер не будет прокручивать содержимое IFRAME отдельно.Не уверен, что это поможет вашему варианту использования - внешняя страница будет прокручиваться, когда IFRAME зависает, но вы не получите никаких событий, пока IFRAME не будет в стороне. – hallvors

Похоже, это ошибка в 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/

источник

2015-07-20 01:18:11

хорошо, но это мне не помогает - во-первых, я не могу обнаружить колесо delta – digitalzoomstudio

во-вторых, цель - обычная полоса прокрутки, переполнение тела скрыто, поэтому на самом деле она не прокручивается (при этом не происходит прокрутки) - проверьте новый пример – digitalzoomstudio

Vimeo Кража плавающего фрейма колесо мыши событие на Firefox

ответ

Смежные вопросы