Geschäftsanforderungsszenario
In unserer Entwicklung werden H5-Seiten mehr oder weniger extern geöffnet, z. B. WeChat und DingTalk, sodass einige unerwartete Fehler auftreten! Dieses Mal habe ich hauptsächlich das Gleitfrostproblem aufgezeichnet, das durch den von der mobilen H5-Seite auf der iOS-Seite erzeugten Gummirückprall (Gummibandeffekt) verursacht wird. Ich hoffe, dass es für Schüler hilfreich sein wird, die auf ähnliche Probleme stoßen.
Lösung 1: Verwenden Sie inobounce.js
- inobounce.js
führt inbounce.js im Header-Tag der HTML-Hauptseite ein, d. h. Nachdem diese Datei eingeführt wurde, kann die gesamte Seite auf der iOS-Seite nicht mehr verschoben oder gescrollt werden. Wenn Sie möchten, dass das Bildlaufelement einen Bildlaufeffekt erzielt, müssen Sie eine feste Höhe für den Bildlaufbereich festlegen, nämlich Höhe, maximale Höhe, und setzen Sie auch overflow: auto , um das Verschieben der Seite zu erreichen. Um zu verhindern, dass das Scrollen der Seite auf der iOS-Seite hängen bleibt, müssen Sie die Eigenschaft -webkit-overflow-scrolling: touch für den Scrollbereich festlegen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inobounce</title>
<script src="inobounce.js"></script>
<style>
ul {
height: 115px;
border: 1px solid gray;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
</ul>
</body>
</html>
Machen Sie sich keine Sorgen, sehen Sie sich Option zwei an!
Lösung 2: Verarbeitung im CSS-Stil
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iOS橡皮回弹</title>
</head>
<body>
<!-- 内容区 -->
<div id="app"></div>
</body>
</html>
Haupt-CSS-Code:
/* 初始化 */
* {
margin: 0;
padding: 0;
}
/* 基本样式 */
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
box-sizing: border-box;
position: relative;
}
/* 超出滚动 */
#app {
width: 100%;
height: 100%;
overflow-y: auto;
}
Lösung 3: Meta-Tag-Einstellung + CSS (empfohlen)
Legen Sie Folgendes in Ihrem Projekt index.html fest:
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="yes" name="apple-touch-fullscreen" />
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
Zusammenfassen
Im Allgemeinen habe ich alle drei Lösungen in der tatsächlichen Entwicklung ausprobiert. Lösung 1 kann den Rubber-Rebound-Effekt beim Durchsuchen der H5-Webseite in WeChat perfekt beheben. Wenn die H5-Seite durch die WeChat-Autorisierung auf der iOS-Seite umgeleitet wird, befindet sich unten eine Navigationsleiste, und die Navigationsleiste wird möglicherweise auch verdeckt Klicken Sie dieses Mal auf die beiden Enden der Navigationsleiste. Die Schaltflächen reagieren nicht. Wenn der Safari-Browser die H5-Seite öffnet, werden die Adressleiste oben und die Menüleiste unten auf der Seite bis zu einem gewissen Grad blockiert, der Erlebniseffekt ist nicht sehr ideal und diese Lösung wird schließlich verabschiedet. Die zweite Option wird in meiner eigentlichen Arbeit verwendet und der Rückpralleffekt wurde bis zu einem gewissen Grad verbessert. Im Vergleich zur ersten Lösung wurde der Erlebniseffekt erheblich verbessert. Die drei Leute denken, dass die Lösung die einfachste und direkteste ist, und mein Problem wird durch diese Lösung gelöst.