para - iframe javascript

Evite que la página principal se desplace cuando el mouse esté sobre el iframe incrustado en Firefox

Question

... sin limitar el desplazamiento dentro del iframe o la necesidad de nombrar / etiquetar específicamente todos los elementos desplazables.

Imagine el widget de google maps incrustado en la página principal. Cuando amplía el widget, no quiere que la página principal se desplace, obviamente.

Pensé que una respuesta a mi pregunta anterior resolvió el problema:

Mientras se desplaza dentro de un iframe, el cuerpo no sabe nada de lo que sucede allí. Pero cuando el desplazamiento del iframe llega al fondo o a la parte superior, se desplaza hacia el cuerpo.

Cancele el evento que se propaga desde el iframe.

Pero la solución no funciona en Firefox porque Firefox no propagará, por diseño , los eventos capturados por iframe a la página principal, aunque curiosamente se desplazará a la página principal. Ver jsfiddle aquí .

$(''body'').bind(''mousewheel DOMMouseScroll'', onWheel);

function onWheel (e){
    if (e.target === iframe)
        e.preventDefault();
    console.log(e);
}

Entonces, ¿cómo evito que la página se desplace cuando el usuario amplía el contenido en iframe incorporado, en Firefox?

Answer 1

Creo que eso resolverá tu problema, resolvió el mío

    var myElem=function(event){
  return $(event.toElement).closest(''.slimScrollDiv'')
}

$(document).mouseover(function(e){
     window.isOnSub=myElem(e).length>0



})

$(document).on(''mousewheel'',function(e){
  if(window.isOnSub){  
console.log(e.originalEvent.wheelDelta);      
    if( myElem(e).prop(''scrollHeight'')-myElem(e).scrollTop()<=myElem(e).height()&&(e.originalEvent.wheelDelta<0)){

      e.preventDefault()
    } 


}

})

reemplace ''.slimScrollDiv'' con el selector de elementos que desee
evitar el desplazamiento de los padres mientras el mouse está en él

http://jsbin.com/cutube/1/edit?html,js,output

Answer 2

Dado que es un error en Firefox, la solución alternativa es trabajar directamente con el evento de scroll , en lugar de la mousewheel del mousewheel / DOMMouseScroll .

La forma en que lo hice: cuando el usuario ingresa el mouse sobre el iframe , configuro un indicador como true , y cuando deja el mouse ahí, lo configuro nuevamente como false .

Luego, cuando el usuario intenta desplazarse, pero la flecha del mouse está dentro del iframe, impido que la ventana principal se desplace. Pero, lamentablemente, no puede evitar que la ventana se desplace con el e.preventDefault() habitual e.preventDefault() , por lo que todavía necesitamos otra solución aquí, forzando a la ventana a desplazarse exactamente a las posiciones X e Y que ya tenía.

El código completo:

(function(w) {
    var s = { insideIframe: false } 

    $(iframe).mouseenter(function() {
        s.insideIframe = true;
        s.scrollX = w.scrollX;
        s.scrollY = w.scrollY;
    }).mouseleave(function() {
        s.insideIframe = false;
    });

    $(document).scroll(function() {
        if (s.insideIframe)
            w.scrollTo(s.scrollX, s.scrollY);
    });
})(window);

Creé una función ejecutada inmediatamente para evitar la definición de la variable s en el ámbito global.

Fiddle trabajando: http://jsfiddle.net/qznujqjs/16/

Editar

Dado que su pregunta no fue etiquetada con jQuery (aunque dentro de ella, ha mostrado un código usando la biblioteca), la solución con vanilla JS es tan simple como la anterior:

(function(w) {
    var s = { insideIframe: false } 

    iframe.addEventListener(''mouseenter'', function() {
        s.insideIframe = true;
        s.scrollX = w.scrollX;
        s.scrollY = w.scrollY;
    });

    iframe.addEventListener(''mouseleave'', function() {
        s.insideIframe = false;
    });

    document.addEventListener(''scroll'', function() {
        if (s.insideIframe)
            w.scrollTo(s.scrollX, s.scrollY);
    });
})(window);

Answer 3

Teniendo en cuenta todos los requisitos previos, creo que la siguiente es la mejor manera de hacer que esto funcione en Firefox.

Envuelve tu iframe con un div que es un poco más corto para habilitar el desplazamiento vertical en él:

<div id="wrapper" style="height:190px; width:200px; overflow-y: auto; overflow-x: hidden;">
  <iframe id="iframeid" height="200px" width="200px" src="about:blank">
  </iframe>
</div>

Ahora puede centrar el iframe verticalmente y reubicarlo cada vez que el envoltorio recibe un evento de scroll (se producirá cuando un usuario intente desplazarse en los bordes del marco):

var topOffset = 3;

wrapper.scrollTop(topOffset);

wrapper.on("scroll", function(e) {
    wrapper.scrollTop(topOffset);
});

Combina esto con tu solución anterior para Chrome, y debería cubrir todos los principales navegadores. Aquí hay un ejemplo de trabajo: http://jsfiddle.net/o2tk05ab/5/

El único problema pendiente será la barra de desplazamiento vertical visible en una envoltura div . Hay varias formas de hacerlo, por ejemplo: Ocultar barra de desplazamiento, pero aún así poder desplazar