h5 problema no puede moverse hacia arriba y hacia abajo una página en el navegador de los teléfonos Android

1, cuando se añade el siguiente estilo en CSS, la página no puede conducir a la diapositiva normal de arriba y abajo

// css 文件
{ touch-action: none; }

Después de esta línea de código se traducirá página no puede ser deslizante normal de arriba y abajo,

Solución: Modificar el valor predeterminado { touch-action: auto; }o eliminar estilo desviado

La razón:
el atributo CSS valor toque de acción Descripción:
Auto
cuando se produce un evento de toque en el elemento por el navegador para decidir qué operaciones, tales como alisado de la ventana, zoom y así sucesivamente.
Ninguno
cuando se produce un evento de toque en el elemento, no hacer nada.
pan-x
habilitado niveles gesto traducción con un solo dedo. Puede ser pan-Y, pan plano, pan-abajo y / o pinch-zoom combinación.
Pan-y
permitir la traducción gesto de un dedo vertical. Puede ser pan-x, izquierda-pan, pan-derecha y / o combinación pinch-zoom.
la manipulación
del navegador sólo permite el desplazamiento continuo y operaciones de zoom. No se admite cualquier otro valor con el apoyo de la conducta de auto. Permiten alejar o acercar gesto de zoom, pero desactivar otros gestos no estándar, tales como doble click para zoom. Haga doble clic para desactivar la función de zoom puede reducir la necesidad de generación de retardo caso navegador clic cuando el usuario hace clic en la pantalla. Este es el "pan-pan-x pellizco y -zoom" ( siendo válido para la compatibilidad en sí) alias.
Pan-izquierda, pan-derecha, pan-arriba, pan-abajo
habilitar el desplazamiento se inicia con la dirección especificada gesto de un solo dedo. Una vez que la salida lanzada, todavía puede ser la dirección opuesta. Tenga en cuenta, de desplazamiento "hacia arriba" medios (pan plano) que el usuario está arrastrando el dedo hacia abajo sobre la superficie de la pantalla, el mismo pan-izquierda representa al usuario arrastrar el dedo hacia la derecha. Una pluralidad de direcciones se puede combinar, a menos que haya una representación más simple (por ejemplo, "pan-derecha pan-izquierda " no es válido porque el "-x pan" más simple, y "pan-abajo pan-izquierda" efecto).
pinch-zoom
Habilitar bandeja de varios dedos y el zoom página. Esto se puede combinar con cualquier valor de la traducción.
dirección de referencia: Para el uso del tacto de acción

2. Se añaden en el desbordamiento de css: hidden;
allá puede conducir a la página oculta no puede deslizarse;

	// css 文件
	{ overflow:hidden;}

3. Problemas campo js, ​​donde no es tal como para impedir que el touchstart evento predeterminado, TouchMove o evento touchend de razones

// js文件
e.preventDefault();   //会阻止默认行为 

Por último, optimizar la acción de deslizamiento

上下拉动滚动条时卡顿、慢

 body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
Publicado 58 artículos originales · ganado elogios 20 · vistas 110 000 +

Supongo que te gusta

Origin blog.csdn.net/fly_wugui/article/details/89921796
Recomendado
Clasificación