javascript - playsinline - ¿Deshabilita el desplazamiento en una aplicación web de iPhone?
playsinline video html5 (9)
''self.webView.scrollView.bounces = NO;''
Simplemente agregue esta línea en el ''viewDidLoad'' del archivo mainViewController.m de su aplicación. puedes abrirlo en el Xcode y agregarlo.
Esto debería hacer que la página sin rebotes de banda de caucho siga habilitando el desplazamiento en la vista de la aplicación.
¿Hay alguna forma de desactivar completamente el desplazamiento de la página web en una aplicación web de iPhone? He intentado numerosas cosas publicadas en google, pero ninguna parece funcionar.
Aquí está mi configuración de encabezado actual:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
document.body.addEventListener(''touchmove'', function(e){ e.preventDefault(); });
no parece funcionar
Cambie al evento touchstart lugar de touchmove . En Eventos con un dedo , dice que no se envían eventos durante una bandeja, por lo que el touchmove puede ser demasiado tarde.
Agregué el oyente al documento, no al cuerpo.
Ejemplo:
document.ontouchstart = function(e){
e.preventDefault();
}
Esto debería funcionar. No más áreas grises en la parte superior o inferior :)
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
Pero esto también desactiva cualquier área desplazable. Si desea mantener sus áreas desplazables y aún eliminar el efecto de banda de goma en la parte superior e inferior, consulte aquí: https://github.com/joelambert/ScrollFix .
Inhabilitar:
document.ontouchstart = function(e){ e.preventDefault(); }
Habilitar:
document.ontouchstart = function(e){ return true; }
Intenté las respuestas anteriores y particularmente las de Gajus, pero ninguna funciona. Finalmente, encontré la respuesta a continuación para resolver el problema, de modo que solo el cuerpo principal no se desplaza, pero todas las demás secciones de desplazamiento dentro de mi aplicación web funcionan bien. Simplemente establece la posición fija para tu cuerpo:
body {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
La página debe iniciarse desde la pantalla de inicio para que funcione la metaetiqueta.
Si está usando jquery 1.7+, esto funciona bien:
$("donotscrollme").on("touchmove", false);
document.addEventListener(''touchstart'', function (e) {
e.preventDefault();
});
No utilice la propiedad ontouchmove para registrar el controlador de eventos mientras se está ejecutando, con el riesgo de sobrescribir un manejador de eventos existente. Use addEventListener lugar (vea la nota sobre IE en la página MDN).
Tenga en cuenta que la prevención del valor predeterminado para el evento touchstart en la window o document deshabilitará el desplazamiento de las áreas descendentes.
Para evitar el desplazamiento del documento, pero dejando intactos todos los demás eventos, evite el valor predeterminado para el primer evento de touchstart después del touchstart :
var firstMove;
window.addEventListener(''touchstart'', function (e) {
firstMove = true;
});
window.addEventListener(''touchmove'', function (e) {
if (firstMove) {
e.preventDefault();
firstMove = false;
}
});
La razón por la que esto funciona es que Safari móvil usa el primer movimiento para determinar si se está desplazando el cuerpo del documento. Me he dado cuenta de esto mientras ideé una solución más sofisticada.
En caso de que alguna vez deje de funcionar, la solución más sofisticada es inspeccionar el elemento touchTarget y sus elementos principales y crear un mapa de direcciones que se pueda desplazar. A continuación, utilice el primer evento de touchmove para detectar la dirección de desplazamiento y ver si se desplazará el documento o el elemento de destino (o cualquiera de los elementos principales del elemento de destino):
var touchTarget,
touchScreenX,
touchScreenY,
conditionParentUntilTrue,
disableScroll,
scrollMap;
conditionParentUntilTrue = function (element, condition) {
var outcome;
if (element === document.body) {
return false;
}
outcome = condition(element);
if (outcome) {
return true;
} else {
return conditionParentUntilTrue(element.parentNode, condition);
}
};
window.addEventListener(''touchstart'', function (e) {
touchTarget = e.targetTouches[0].target;
// a boolean map indicating if the element (or either of element parents, excluding the document.body) can be scrolled to the X direction.
scrollMap = {}
scrollMap.left = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollLeft > 0;
});
scrollMap.top = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollTop > 0;
});
scrollMap.right = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollWidth > element.clientWidth &&
element.scrollWidth - element.clientWidth > element.scrollLeft;
});
scrollMap.bottom =conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollHeight > element.clientHeight &&
element.scrollHeight - element.clientHeight > element.scrollTop;
});
touchScreenX = e.targetTouches[0].screenX;
touchScreenY = e.targetTouches[0].screenY;
disableScroll = false;
});
window.addEventListener(''touchmove'', function (e) {
var moveScreenX,
moveScreenY;
if (disableScroll) {
e.preventDefault();
return;
}
moveScreenX = e.targetTouches[0].screenX;
moveScreenY = e.targetTouches[0].screenY;
if (
moveScreenX > touchScreenX && scrollMap.left ||
moveScreenY < touchScreenY && scrollMap.bottom ||
moveScreenX < touchScreenX && scrollMap.right ||
moveScreenY > touchScreenY && scrollMap.top
) {
// You are scrolling either the element or its parent.
// This will not affect document.body scroll.
} else {
// This will affect document.body scroll.
e.preventDefault();
disableScroll = true;
}
});
La razón por la que esto funciona es que Safari móvil está utilizando el primer movimiento táctil para determinar si el cuerpo del documento se está desplazando o el elemento (o cualquiera de los elementos del elemento objetivo) y se apega a esta decisión.
document.ontouchmove = function(e){
e.preventDefault();
}
En realidad, es la mejor opción que descubrí, ya que le permite seguir tocando los campos de entrada y arrastrar elementos mediante jQuery UI que se puede arrastrar pero que impide que la página se desplace.