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和Chrome上模拟iPhone X）。

.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 -->

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

在移动设备上放大时Div滚动问题

1 个答案: