时间戳

首页 > 解决方案 > 在移动设备上放大时出现 Div 滚动问题

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

问题描述

我的网页上有一个聊天日志 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">

标签： htmlcss

解决方案

如果以下方法不起作用，并且您可以接受，请通过 repo 或其他方式与我分享您的项目源代码。

通过更改消息节点的结构，我似乎能够解决这个问题（在模拟 iPhone X 的 FF 和 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 -->

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

推荐阅读