iPad和Android上的滚动问题

Question

I have two scrollable divs. One for vertical scroll and and one for horizontal scrolling with the folowing structure:

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;
}

FIDDLE DEMO

On iPad and Android I can't scroll up and down on the .body div. Can you tell me how can I correct this?

Answer 1

我现在已经尝试过了，并且可以正常工作，我的猜测是您可能在html头中缺少以下行：

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