0
228
ViewsImpedir el desplazamiento por arrastre en Safari en Mac
Echa un vistazo a este codepen
Hay un cuadrado rojo en la esquina.
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;
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.
3 answers
Answer question0
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>0
Usando css puedes dar pointer-events:none; para evitar que ocurra cualquier evento al hacer clic en él.
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>