deshabilitar el efecto CTRL/Zoom de rueda en el tiempo de ejecución

Question

Cómo se desactiva el efecto de desplazamiento ctrl/rueda con css o javascript en ciertos elementos. Creo una barra de menú que se distorsiona cuando se aplica el efecto de zoom. Me gustaría desactivarlo solo para ciertos elementos.

Answer 1

No se puede; esta es una característica del navegador, no una función de documento.

Habiendo dicho esto, si utiliza CSS style = "font-size: 9px;", puede anular el tamaño del texto. El zoom del navegador seguirá funcionando, y los cambios en el tamaño de la fuente del navegador tendrán algunos efectos de reformateo.

Answer 2

Mejor idea: diseñe su diseño para que sea lo suficientemente robusto como para manejar cambios como este. No puede deshabilitarlos, incluso si arregla el tamaño de la fuente (lo que nunca debe hacer en primer lugar), por lo que también podría responder al acercamiento con gracia.

El hecho es que si todos los elementos son escalados equitativamente por el navegador, su página debería verse y funcionar exactamente igual que antes (excepto, mejor dicho, más grande) a menos que tome algunos atajos perezosos en su diseño algun lado.

Answer 3

Aquí está mi problema: Siempre he diseñado con ems, y funcionan mágicamente. Pero con el zoom de página completa, mis fondos también se acercan. Si tengo un patrón repetitivo como fondo principal, no quiero que se pixelice. Nos ayudan a evitar algunos trabajos, como la implementación de las puertas deslizantes de CSS de Doug Bowman, pero ahora tengo que vivir con pestañas borrosas.

También tengo otro problema con el zoom de página completa, al menos tal como está implementado en los navegadores de hoy: Soy una de esas personas que configuran mi navegador a 12pt en lugar de 16pt. De vez en cuando, me encontraba con un sitio (de ancho fijo, por supuesto) que cambia el tamaño del texto a un tamaño pequeño (supongo que usaron 0.9em o algo así, en lugar de 14px, mientras intentaban hacerlo menor). Usualmente solo acercaba una o dos mitades, y todo estaría bien. Sin embargo, con el zoom de página completa, las imágenes se escalan mal y tengo una barra de desplazamiento horizontal.

La solución al primer problema sería permitir algún tipo de instrucción de procesamiento en la etiqueta background-image para no permitir el zoom de página completa en ese elemento. O tal vez algo en la cabeza del documento. Si los navegadores realmente quieren ser justos al respecto, también podrían darles a los usuarios una opción que podrían establecer que anula la instrucción sin zoom, para que puedan hacer zoom de todos modos si así lo desean. La solución al segundo problema sería hacer zoom de página completa para convertir todas las px en em a una velocidad de 16px/em primero, y luego reducir el tamaño del texto, en lugar de convertir px a em usando su texto tamaño como base. Luego, al desplazarse hacia atrás hasta 16 píxeles, las imágenes quedarán perfectamente dimensionadas, según lo previsto.

solución

Answer 4

para IE y Firefox:

var obj=document.body; // obj=element for example body 
// bind mousewheel event on the mouseWheel function 
if(obj.addEventListener) 
{ 
    obj.addEventListener('DOMMouseScroll',mouseWheel,false); 
    obj.addEventListener("mousewheel",mouseWheel,false); 
} 
else obj.onmousewheel=mouseWheel; 

function mouseWheel(e) 
{ 
    // disabling 
    e=e?e:window.event; 
    if(e.ctrlKey) 
    { 
     if(e.preventDefault) e.preventDefault(); 
     else e.returnValue=false; 
     return false; 
    } 
}