html - 在移动设备上放大时出现 Div 滚动问题

Question

我的网页上有一个聊天记录 div，它在计算机上可以很好地滚动，而且当屏幕处于默认(缩小)位置时，它在移动设备上也可以很好地滚动；然而，当我放大并尝试滚动 div 时，div 会稍微滚动，但不幸的是整个屏幕也会滚动(比 div 滚动更多)...

有没有办法在缩放时防止这种情况发生？

CSS:

.a
{
    border:1px solid black;
    width:30vw;
    height:30vw;
    position:relative;
    display:inline-block;
    overflow-y:auto;
    overflow:scroll;
    font-size:1.1vw;
    text-align:left;
background-color:white;
}

HTML:

<div class = "a" id = "chatbox">

Answer 1

如果以下方法不起作用，并且您可以接受，请通过存储库或其他方式与我分享您的元素源。

我似乎能够通过更改消息节点的结构来解决这个问题(在 FF 和模拟 iPhone X 的 Chrome 上)。

.a {
  border: 1px solid black;
  width: 30vw;
  height: 30vw;
  position: relative;
  display: inline-block;
  overflow-y: auto;
  overflow: scroll;
  font-size: 1.1vw;
  text-align: left;
  background-color: white;
}

.msg {
  width: 100%;
  font-size: 1.1vw;
  text-align: left;
}

.name {
  color: blue
}

.msgContent {
  color: black
}

<div class="a" id="chatbox">
  <div class="msg">
      <span class="name">Name:</span>
      <span class="msgContent">This is a message.</span>
  </div>
</div>

<!-- what you had --

<div class="a" id="chatbox">
  <label style="color:a1bd77; cursor: pointer;" onclick="profilePreview(), reply_click(this.id)" id="name">name</label>
  : Okay time to start a fresh chat
  <br >
</div>

-- what you had -->

我没有在实际手机上进行测试，因此结果可能会有所不同。