• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

229
Vistas
Impedir el desplazamiento por arrastre en Safari en Mac

Echa un vistazo a este codepen
Hay un cuadrado rojo en la esquina.
ingrese la descripción de la imagen aquí
Si hace clic (con el mouse o el panel táctil) en este cuadrado y lo arrastra hacia abajo, en .parent en Mac, el elemento principal se desplazará hacia abajo.
Aunque .parent tiene overflow-y: hidden;

ingrese la descripción de la imagen aquí

No se produce desplazamiento en todos los demás navegadores.
¿Cómo puedo evitar este desplazamiento en un safari? Como una solución aproximada, puedo escuchar el desplazamiento y anular el scrollTop si no es cero, pero tal vez haya una solución más elegante.

almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Puede agregar un div intermediario. luego, establezca las propiedades de ancho, alto y desbordamiento.

 .parent { width: 200px; height: 200px; border: 1px dashed black; overflow-x: auto; overflow-y: hidden; } /** intermediary div */ .parent > div { width: 200%; height: 100%; overflow: hidden; } .child { width: 100%; /** this should be 100% **/ height: 200%; background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black); background-size: 50px 50px, 100% 100%; background-repeat: no-repeat; background-position: center; }
 <div class="parent"> <div> <div class="child"></div> </div> </div>

O agregue pointer-events:none a parent.

 .parent { /* This prevents dragging */ pointer-events: none; width: 200px; height: 200px; border: 1px dashed black; overflow-x: auto; overflow-y: hidden; } .child { width: 200%; height: 200%; background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black); background-size: 50px 50px, 100% 100%; background-repeat: no-repeat; background-position: center; }
 <div class="parent"> <div class="child"></div> </div>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Usando css puedes dar pointer-events:none; para evitar que ocurra cualquier evento al hacer clic en él.

almost 3 years ago · Juan Pablo Isaza Denunciar

0

¡Este es definitivamente un hallazgo interesante! Pensarías que esto sería imposible ya que configuraste overflow-y en none . No obstante, puede evitar este comportamiento y prohibir los clics dentro del padre usando este JavScript:

 const parent = document.querySelector('.parent'); parent.addEventListener('mousedown', e => e.preventDefault());

Al agregar preventDefault() al evento desencadenado en mousedown , evita que el navegador evalúe otros eventos relacionados con ese clic, incluido el arrastre. Aquí está en acción:

 const parent = document.querySelector('.parent'); parent.addEventListener('mousedown', e => e.preventDefault());
 .parent { width: 200px; height: 200px; border: 1px dashed black; overflow-x: auto; overflow-y: hidden; } .child { width: 200%; height: 200%; background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black); background-size: 50px 50px, 100% 100%; background-repeat: no-repeat; background-position: center; }
 <div class="parent"> <div class="child"></div> </div>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda