HTML5-Scroll-Penetrationsmethode

Die Website muss auf der mobilen Seite angepasst werden. Für mobile H5- und Webseiten werden Flex-Layout-Lösungen wie Bluma verwendet.

Die in H5 verwendete Liste verwendet React-Virtualized, um die Tabelle zu zeichnen

Um die spezifischen Details einer einzelnen Datenzeile in der Tabelle anzuzeigen, besteht die übliche Lösung darin, eine neue Seite oder ein Popup-Fenster zu verwenden.

Hier wird die Popup-Fensterlösung verwendet. Die Datendetails nach dem Klicken auf eine einzelne Datenzeile verwenden die Modalkarte von Bluma.

Spezifische Details und Beispiele finden Sie unter: https://bulma.io/documentation/components/modal/

Nachdem Sie auf eine einzelne Datenzeile geklickt haben, werden in einem Popup-Fenster detaillierte Daten angezeigt und die gesamte Modalkarte wird auf position:fixed;

Es gibt keinen Fußzeilenteil. Stellen Sie die Höhe der Modalkarte auf die Höhe des gesamten Bildschirms ein: 100 VH

Leistung:

• Bei der Anzeige im Chrome-Browser nimmt die gesamte Modal-Karte den gesamten Bildschirm ein.
• Die Anzeige auf dem Mobiltelefon ist ebenfalls voll, aber das Problem besteht darin, dass der Suchfeldteil des Browsers nach oben verschoben wird, wenn Sie sich entsprechend der Geste bewegen. Zu diesem Zeitpunkt kann die Datenlistenseite unter dem Popup-Fenster angezeigt werden verschoben werden, und dann deckt der Titel des Popup-Fensters den Teil des ursprünglichen Browser-Suchfelds ab, es gibt jedoch eine Verzögerung dazwischen, Sie können die Daten auf der Seite unten deutlich sehen
• Bei anderen Mobiltelefonen wird eine andere Anzeige angezeigt, wenn die Gleitgeschwindigkeit relativ hoch ist und Sie unmittelbar nach dem Erscheinen des Popup-Fensters einen kleinen leeren Bereich am unteren Rand des Popup-Fensters sehen Unterhalb des Popup-Fensters kann gescrollt werden, und es gibt eine offensichtliche Verzögerung und eine Daten-Scroll-Anzeige.

Lösung:

JS + CSS-Überlauf: versteckt

Fügen Sie über JS dynamisch CSS-Klassen zum Seiten-HTML unter dem Popup-Fenster hinzu

 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');}

 is-clipped { overflow:hidden!important}

Wenn das Popup-Fenster geschlossen wird, löschen Sie die CSS-Klasse der Seite über JS: is-clipped

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

Nach dem Testen dieser Lösung in der Anwendung wurde jedoch festgestellt, dass das Problem dadurch nicht gelöst wurde und die oben genannten Probleme weiterhin auftraten.

JS + CSS-Position: fest + scrollTop

Planideen:

1. Wenn das Popup-Fenster angezeigt wird, stellen Sie die Position des HTML-Codes auf „Fest“ ein. Löschen Sie nach dem Schließen des Popup-Fensters das Positionsattribut des HTML-Codes.
2. Da die Listenseite gescrollt wird und die angeklickte Zeile möglicherweise erst nach dem Scrollen erscheint, muss der scrollTop-Wert der HTML-Seite selbst berechnet werden.
3. Denn nach dem Festlegen der Position beim Eintreten des Popup-Fensters wird der scrollTop-Wert der HTML-Seite zu 0 und kehrt zum oberen Rand der Seite zurück. Daher müssen Sie nach dem Schließen des Popup-Fensters manuell festlegen scrollTop-Wert der HTML-Seite, damit zur ursprünglichen Position der HTML-Seite gescrollt werden kann.
4. Aus Kompatibilitätsgründen müssen Sie den scrollTop-Wert verschiedener Eigenschaften festlegen

Vor dem Popup-Fenster:

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

Schließen Sie das Popup-Fenster:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.