scrolling - ipad safari: ¿Deshabilita el desplazamiento y el efecto de rebote?
prevent elastic scrolling ios (12)
Al igual que con el kiwi enojado, lo hice funcionar usando la altura en lugar de la posición:
html,body {
height: 100%;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
Estoy trabajando en una aplicación basada en navegador, actualmente estoy desarrollando y diseñando para el navegador ipad safari.
Estoy buscando dos cosas en el ipad: ¿cómo puedo deshabilitar el desplazamiento vertical para las páginas que no lo requieren? y ¿cómo puedo desactivar el efecto de rebote elástico?
Para aquellos que usan MyScript the Web App y están luchando con el desplazamiento / arrastre corporal (en iPad y Tabletas) en lugar de escribir:
<body touch-action="none" unresolved>
Eso lo solucionó para mí.
Para evitar el desplazamiento en los navegadores móviles modernos, debe agregar el pasivo: falso. Me había estado tirando de los pelos para que esto funcionara hasta que encontré esta solución. Solo he encontrado esto mencionado en otro lugar en Internet.
function preventDefault(e){
e.preventDefault();
}
function disableScroll(){
document.body.addEventListener(''touchmove'', preventDefault, { passive: false });
}
function enableScroll(){
document.body.removeEventListener(''touchmove'', preventDefault, { passive: false });
}
Probado en iphone. Solo use este CSS en el contenedor del elemento de destino y cambiará el comportamiento de desplazamiento, que se detiene cuando el dedo sale de la pantalla.
-webkit-overflow-scrolling: auto
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
Puede usar este fragmento de código jQuery para hacer esto:
$(document).bind(
''touchmove'',
function(e) {
e.preventDefault();
}
);
Esto bloqueará el desplazamiento vertical y también cualquier efecto de rebote que ocurra en sus páginas.
Puede usar js para prevenir scroll:
let body = document.body;
let hideScroll = function(e) {
e.preventDefault();
};
function toggleScroll (bool) {
if (bool === true) {
body.addEventListener("touchmove", hideScroll);
} else {
body.removeEventListener("touchmove", hideScroll);
}
}
Y que solo ejecute / detenga el toggleScroll función cuando seleccione / cierre modal.
Me gusta esto toggleScroll(true) / toggleScroll(false)
(Esto es solo para iOS, en Android no funciona)
Respuesta de 2011: para una aplicación web / html que se ejecuta dentro de iOS Safari, quieres algo como
document.ontouchmove = function(event){
event.preventDefault();
}
Para iOS 5 es posible que desee tener en cuenta lo siguiente: document.ontouchmove y desplazamiento en iOS 5
Actualización de septiembre de 2014: se puede encontrar un enfoque más completo aquí: https://github.com/luster-io/prevent-overscroll . Para eso y un montón de consejos útiles sobre aplicaciones web, consulte http://www.luster.io/blog/9-29-14-mobile-web-checklist.html
Actualización de marzo de 2016: el último enlace ya no está activo: consulte https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html para la versión archivada. Gracias @falsarella por señalar eso.
Sé que esto es un poco fuera de pista, pero he estado usando Swiffy para convertir Flash en un juego interactivo HTML5 y encontré el mismo problema de desplazamiento, pero no encontré ninguna solución que funcionara.
El problema que tuve fue que el escenario de Swiffy ocupaba toda la pantalla, por lo que tan pronto como se cargó, el evento document touchmove nunca se activó.
Si traté de agregar el mismo evento al contenedor Swiffy, se reemplazó tan pronto como se cargó la etapa.
Al final lo resolví (bastante desordenado) aplicando el evento touchmove a cada DIV dentro del escenario. Como estos divs también cambiaban constantemente, tenía que seguir revisándolos.
Esta fue mi solución, que parece funcionar bien. Espero que sea útil para cualquier otra persona que intente encontrar la misma solución que yo.
var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
''touchmove'',
function(e) {
e.preventDefault();
}
);}
También puede cambiar la posición del cuerpo / html a fixed:
body,
html {
position: fixed;
}
ninguna de las soluciones funciona para mí. Así es como lo hago.
html,body {
position: fixed;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
var xStart, yStart = 0;
document.addEventListener(''touchstart'', function(e) {
xStart = e.touches[0].screenX;
yStart = e.touches[0].screenY;
});
document.addEventListener(''touchmove'', function(e) {
var xMovement = Math.abs(e.touches[0].screenX - xStart);
var yMovement = Math.abs(e.touches[0].screenY - yStart);
if((yMovement * 3) > xMovement) {
e.preventDefault();
}
});
Evita el desplazamiento predeterminado de Safari y los gestos de rebote sin separar los oyentes de eventos táctiles.
overflow: scroll;
-webkit-overflow-scrolling: touch;
En el contenedor puede establecer el efecto de rebote dentro del elemento
Fuente: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/