|
@@ -27,14 +27,27 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
html {
|
|
html {
|
|
|
|
|
+ height: 100%;
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
|
background: var(--bg);
|
|
background: var(--bg);
|
|
|
color: var(--text);
|
|
color: var(--text);
|
|
|
- min-height: 100vh;
|
|
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ #main {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-height: 0;
|
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
padding-bottom: calc(92px + var(--safe-bottom));
|
|
padding-bottom: calc(92px + var(--safe-bottom));
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -66,6 +79,11 @@
|
|
|
padding: 14px 15px 8px;
|
|
padding: 14px 15px 8px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ .scroll-spacer {
|
|
|
|
|
+ height: calc(72px + var(--safe-bottom));
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.conversation .row:last-child {
|
|
.conversation .row:last-child {
|
|
|
margin-bottom: 0;
|
|
margin-bottom: 0;
|
|
|
}
|
|
}
|
|
@@ -605,7 +623,10 @@
|
|
|
|
|
|
|
|
var convHtml = renderMessages(messages);
|
|
var convHtml = renderMessages(messages);
|
|
|
if (convHtml) {
|
|
if (convHtml) {
|
|
|
- bodyHtml += '<section class="conversation">' + convHtml + "</section>";
|
|
|
|
|
|
|
+ bodyHtml +=
|
|
|
|
|
+ '<section class="conversation">' +
|
|
|
|
|
+ convHtml +
|
|
|
|
|
+ '</section><div class="scroll-spacer" aria-hidden="true"></div>';
|
|
|
} else {
|
|
} else {
|
|
|
bodyHtml += '<div class="empty">暂无对话内容</div>';
|
|
bodyHtml += '<div class="empty">暂无对话内容</div>';
|
|
|
}
|
|
}
|