Méthode de pénétration du défilement HTML5

Le site Web doit être adapté du côté mobile. Pour les côtés mobiles H5 et Web, des solutions de mise en page flexibles telles que Bluma sont utilisées.

La liste utilisée dans H5 utilise React-Virtualized pour dessiner le tableau

Afin d'afficher les détails spécifiques d'une seule ligne de données dans le tableau, la solution habituelle consiste à utiliser une nouvelle page ou une fenêtre pop-up.

La solution de fenêtre contextuelle est utilisée ici. Les détails des données après avoir cliqué sur une seule ligne de données utilisent la carte modale de Bluma.

Pour des détails spécifiques et des exemples, veuillez vous référer à : https://bulma.io/documentation/components/modal/

Après avoir cliqué sur une seule ligne de données, une fenêtre contextuelle affiche des données détaillées et la carte modale entière est définie sur position:fixed ;

Il n'y a pas de pied de page, définissez la hauteur de la carte modale sur la hauteur de tout l'écran : 100vh

Performance:

• Lorsqu'elle est affichée dans le navigateur Chrome, l'intégralité de la carte modale occupe tout l'écran.
• L'affichage sur le téléphone mobile est également plein, mais le problème est que si vous vous déplacez en fonction du geste, la partie champ de recherche du navigateur sera poussée vers le haut, la page de liste de données sous la fenêtre contextuelle peut. être glissé, puis le titre de la fenêtre contextuelle couvrira la partie originale de la zone de recherche du navigateur, mais il y a un délai entre cela, vous pouvez clairement voir les données sur la page ci-dessous
• Il y aura un autre affichage sur d'autres téléphones mobiles. Si la vitesse de glissement est relativement rapide et que vous glissez immédiatement après l'apparition de la fenêtre contextuelle, vous verrez un petit espace vide au bas de la fenêtre contextuelle. en dessous, la fenêtre contextuelle peut défiler. Et il y a un affichage de retard et de défilement des données évident.

Solution:

Débordement JS + CSS : caché

Ajoutez dynamiquement des classes CSS à la page HTML sous la fenêtre contextuelle via JS

 if ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; openModal(target); } ); });}function openModal(target) { var $target = document.getElementById(target); rootEl.classList.add('is-clipped'); $target.classList.add('is-active');}

 est-clipped {débordement: caché! important}

Lorsque la fenêtre pop-up est fermée, supprimez la classe css de la page via JS : is-clipped

 function closeModals() { rootEl.classList.remove('is-clipped'); $modals.forEach(function ($el) { $el.classList.remove('is-active'); });}

Cependant, après avoir testé cette solution dans l'application, il a été constaté qu'elle ne résolvait pas le problème et que les problèmes ci-dessus persistaient.

Position JS + CSS : fixe + scrollTop

Idées de plans :

1. Lorsque la fenêtre contextuelle apparaît, définissez la position du code HTML sur fixe. Après avoir fermé la fenêtre contextuelle, annulez l'attribut position du code HTML.
2. Étant donné que la page de liste défile et que la ligne cliquée peut apparaître après le défilement, la valeur scrollTop de la page HTML elle-même doit être calculée.
3. Parce qu'après avoir défini la position sur fixe lorsque la fenêtre contextuelle apparaît, la valeur scrollTop de la page HTML deviendra 0 et reviendra en haut de la page. Par conséquent, après avoir fermé la fenêtre contextuelle, vous devez définir manuellement la position. Valeur scrollTop de la page html pour lui permettre de défiler jusqu'à la position d'origine de la page html.
4. Pour des raisons de compatibilité, vous devez définir la valeur scrollTop de différentes propriétés

Avant la fenêtre pop-up :

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

Fermez la fenêtre contextuelle :

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

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.