在文本框上滑动时出现 iPhone 滚动错误答案

【问题标题】：iPhone scroll bug when swiping on a textbox在文本框上滑动时出现 iPhone 滚动错误
【发布时间】：2018-03-02 21:47:23
【问题描述】：

我有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。

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

【问题讨论】：

为什么投反对票？
Go to ... -> 否。您的问题必须在其自身的问题中包含可重现的问题描述。一旦问题得到解决，这个问题在未来将毫无用处。看到这个：stackoverflow.com/help/mcve
@NicoO 现在可以了吗？
你希望助手们用这个剪断做什么？至少要付出一些努力，并在堆栈被剪断的情况下使其可执行。您的“问题”也包含两个问题 1. 这是一个错误吗？ > 好吧，也许吧。和 2. 如何解决它。这似乎太宽泛了。您应该描述当前的行为是什么，您真正希望它做什么，以及您自己尝试过什么。
@Nico 没有被剪断。你试过了吗？

标签： html ios css safari

【解决方案1】：

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

这似乎是由<div style='overflow:auto'> 引起的。当overflow 被删除时，页面也会在滑动文本框时滚动。

在 iPhone 6s、6s+、7、8 和 X 的 safari 中测试。希望这会有所帮助。

【讨论】：

谢谢，我给了这个赏金。不幸的是，在我的真实网页中，我需要 `overflow:auto'，因为我使用 codepen.io/anthonyLukes/pen/DLBeE 中的技术来拥有一个固定的标题。
我会制定解决方案并回复您。谢谢你的赏金。

【解决方案2】：

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

使用引导程序时，您需要将行类包含在容器类中，如下面的代码。由于这个 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>

【讨论】：

感谢您的回答。但是，我在neptune.tandola.com/iphonebug.htm 的示例中添加了container 元素，并且在开始在文本框上滑动时无法上下滚动的问题仍然存在。
文本框是一个输入，所以除非它有要滚动的内容，否则它不会滚动。您是否有一个示例网站可以实现您想要实现的目标？
它实际上在我的 iPhone 5C 上运行良好。野生动物园和铬。没有更多使用 neptune.tandola.com/iphonebug.htm 的错误。尝试清除缓存
所以你把手指放在文本框上，然后向上滑动手指，网页就可以正常向下滚动了？
正如您所描述的，它确实可以正常工作。滚动没有任何问题。