Question

我有a webpage以下html：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div style='display:flex;flex-direction:column;height:100%;'>
        <div style='overflow:auto'>
            <div style='height:500px; background:green;'></div>
            <div class='container'>
                <div class='row'>
                    <div class='col-sm-6'>
                        <input type='text' style='' class='form-control' placeholder='swipe here' />
                    </div>
                </div>
            </div>
            <div style='height:500px; background:blue;'></div>
        </div>
    </div>
</body>
</html>

将其加载到iPhone上。尝试通过滑动来上下滚动。现在尝试通过在“滑动此处”的文本框中开始滑动来滚动。对我来说，当我这样做时它不会滚动。我正在使用iPhone 6S。

这是一个错误吗？我该如何解决它？

Answer 1

从用户的角度来看，这是一个错误。

使用bootstrap时，需要将行类括在容器类中，如下面的代码所示。该页面获取了左侧和右侧滚动的属性，因为这个CSS来自bootstrap：

.row {
    margin-right: -15px;
    margin-left: -15px;
}

以下示例使用div.container有助于限制应用的宽度。

<div style='display:flex;flex-direction:column;height:100%;'>
  <div style='overflow:auto'>
    <div style='height:500px; background:green;'></div>

    <!--This container is missing to get bootstrap row to work well-->

    <div class="container">
      <div class='row'>
        <div class='col-sm-6'>
          <input type='text' style='' class='form-control' placeholder='swipe here' />
        </div>
      </div>
    </div>
    <div style='height:500px; background:blue;'></div>
  </div>
</div>

Answer 2

问题出现在iPhone 6s及更高版本上。

这似乎是由<div style='overflow:auto'>造成的。删除overflow后，页面也会滚动文本框滚动。

在iPhone 6s，6s +，7,8和X上进行Safari测试。希望这会有所帮助。

在文本框上滑动时，iPhone滚动错误

2 个答案: