iPhone弹出窗口问题滚动问题

Question

面对iPhone中的问题，创建一个聊天的Web应用程序。弹出固定位置的聊天窗口。当点击文本输入发送消息时，iPhone键盘打开它并将聊天部分的标题部分移到顶部

需要修复 标题和文本区域应始终与whats-app中的相同 将标题部分设置为固定位置，并将相同的文本区域设置为固定，甚至键盘是否打开 防止头顶移位意味着阻止iPhone滚动

注意：它在Android手机中运行良好。只有iPhone浏览器问题，可能是由于iPhone滚动。

Answer 1

这是一个简单的概念性示例：

<article class="pop-up">
  <h3>Title</h3>
  <div class="content"> <p>Some scrollable content ...</p> </div>
  <div> Some CTA buttons that should be visible for the user </div>
</section>

CSS：

.pop-up {
 position: fixed;
 // some other styles to display it as a popup
}

.content {
position: relative; 
max-height: 100px; // set any max height that fits your design
overflow-y: scroll;
}