Método de penetración de desplazamiento HTML5

El sitio web debe adaptarse en el lado móvil. Para el lado móvil H5 y web, se utilizan soluciones de diseño flexible como Bluma.

La lista utilizada en H5 usa reaccionar virtualizado para dibujar la tabla.

Para mostrar los detalles específicos de una sola fila de datos en la tabla, la solución habitual es utilizar una nueva página o una ventana emergente.

Aquí se utiliza la solución de ventana emergente. Los detalles de los datos después de hacer clic en una sola fila de datos utilizan la tarjeta modal de Bluma.

Para obtener detalles y ejemplos específicos, consulte: https://bulma.io/documentation/components/modal/

Después de hacer clic en una sola fila de datos, una ventana emergente muestra datos detallados y toda la tarjeta modal se configura en posición: fija;

No hay parte de pie de página, establezca la altura de la tarjeta modal a la altura de toda la pantalla: 100vh

Actuación:

• Cuando se muestra en el navegador Chrome, la tarjeta modal completa ocupa toda la pantalla.
• La pantalla del teléfono móvil también está llena, pero el problema es que si se mueve según el gesto, la parte del cuadro de búsqueda del navegador se abrirá. En este momento, la página de lista de datos debajo de la ventana emergente puede aparecer. se desliza, y luego el título de la ventana emergente cubrirá la parte original del cuadro de búsqueda del navegador, pero hay un retraso entre esto, puede ver claramente los datos en la página a continuación
• Habrá otra pantalla en otros teléfonos móviles. Si la velocidad de deslizamiento es relativamente rápida y se desliza inmediatamente después de que aparezca la ventana emergente, verá un pequeño espacio en blanco en la parte inferior de la ventana emergente. Debajo de la ventana emergente se puede desplazar y hay un retraso obvio y una visualización de desplazamiento de datos.

Solución:

Desbordamiento de JS + CSS: oculto

Agregue dinámicamente clases CSS a la página html en la ventana emergente a través de JS

 if ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; openModal(target); } ); });}función openModal(destino) { var $destino = document.getElementById(destino); rootEl.classList.add('está-recortado'); $target.classList.add('está-activo');}

 está recortado {desbordamiento: oculto! importante}

Cuando se cierra la ventana emergente, elimine la clase CSS de la página a través de JS: is-clipped

 function closeModals() { rootEl.classList.remove('está-recortado'); $modals.forEach(function ($el) { $el.classList.remove('está-activo'); });}

Sin embargo, después de probar esta solución en la aplicación, se descubrió que no solucionaba el problema y que los problemas anteriores seguían ocurriendo.

Posición JS + CSS:fijo + desplazamientoArriba

Ideas de planes:

1. Cuando aparezca la ventana emergente, establezca la posición del html en fija. Después de cerrar la ventana emergente, cancele el atributo de posición del html.
2. Debido a que la página de la lista se desplazará y la fila en la que se hace clic puede aparecer después de que se produzca el desplazamiento, es necesario calcular el valor de desplazamiento superior de la página html.
3. Porque después de establecer la posición en fija cuando aparece la ventana emergente, el valor de desplazamiento superior de la página html se convertirá en 0 y volverá a la parte superior de la página. Por lo tanto, después de cerrar la ventana emergente, debe configurarlo manualmente. scrollTop valor de la página html para permitirle desplazarse a la posición original de la página html.
4. Por compatibilidad, debe establecer el valor de desplazamiento superior de diferentes propiedades

Antes de la ventana emergente:

 const scrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;global.document.documentElement.style.position = 'fijo';this.scrollTop = scrollTop;

Cierra la ventana emergente:

 closeModalHandler = () => { const { closeOrderHistoryModal } = this.props; global.document.documentElement.style.position = ''; global.pageYOffset = this.scrollTop; .document.body.scrollTop = this.scrollTop; closeOrderHistoryModal();}

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.