iPad和Android上的滾動問題

Question

我有兩個可滾動的div。 一種用於垂直滾動，另一種用於水平滾動，采用以下結構：

HTML：

<div class="main">
    <div class="vscoller">
        <div class="nohscroll">Some text</div>
        <div class="hscroller">
            <div class="body">Some text</div>
        </div>
    </div>
</div>

CSS：

.main {
  width: 400px;
  height: 400px;
  border: solid 1px black;
  overflow-y: auto;
  overflow-x: hidden;
}
.vscoller {
  height: 5000px;
  width: 400px;

  position: relative;
}
.nohscroll {
  width: 150px;
  background-color: green;
  height: 5000px;
}
.hscroller {
  width: 250px;
  overflow-x: auto;
  overflow-y: hidden;
  position: absolute;
  left: 150px;
  top: 0;
}
.body {
  background-color: gray;
  height: 5000px;
  width: 5000px;
}

現場演示

在iPad和Android上，我無法在.body div上上下滾動。 你能告訴我如何糾正嗎？

Answer 1

我現在已經嘗試過了，並且可以正常工作，我的猜測是您可能在html頭中缺少以下行：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />