野生滚动输入android

Posted 2023-04-18

【中文标题】野生滚动输入android

【英文标题】：wild scroll input android

【发布时间】：2013-01-28 00:47:11

【问题描述】：

我正在开发一个响应式网站，该网站具有不同的样式表，适用于移动设备或桌面设备。一切看起来都不错，而且效果很好，直到在移动设备上与文本输入进行交互。他们应该出现。但是一旦点击（ehrm..touched），我发现android中的浏览器开始疯狂滚动，打字时也出现同样的情况。不过，文本是在输入中输入的，而软键盘/输入焦点不会丢失。

我的项目可以在这里找到：http://www.gortzfruit.nl/new/

问题是我一直在寻找解决方案一段时间，并发现了解决方案对我不起作用的类似问题。我一直在研究的一些主题和解决方案是：

https://github.com/scottjehl/Device-Bugs/issues/3 - 这里建议问题出在定位元素上。特别是在固定定位的元素中是绝对的。这在我的设计中反复出现，但一旦删除它并没有解决问题。

Android Browser textarea scrolls all over the place, is unusable - 这表明问题出在 css-properties -webkit-transform: translate3d(0, 0, 0);和-webkit-backface-visibility：隐藏；。我自己没有包含这些，但我认为我包含的 Google Maps API 可能会使用这些。在分析 Google Maps API 生成的标记后，我发现他们也不使用它。

How can I prevent wild scrolling when a fixed position text input form field gains focus? - 这个专注于解决问题。将主体设置为溢出：隐藏；有人建议在集中注意力时阻止滚动，但它对我不起作用。

disable scrolling on input focus in javascript - 这里建议在 keydown 上返回 false 可能会解决问题，我尝试过但没有成功。这会阻止我的文本实际输入到输入中。

我知道这与 Android 中导致这种奇怪滚动的错误有关。但我不知道如何应对这种情况了。对我来说，我是否知道如何避免错误或是否找到使错误不引人注意的技巧并不重要。我只是想摆脱在文本框上打字和聚焦/模糊时奇怪的滚动行为。

提前致谢，

杰伦

【参考方案1】：

从您的标记中删除元视口标签，并将其添加到 opening 正文标签之后：

<script type="text/javascript">
<!--
    (function() 
        var meta = document.createElement("meta");
        meta.setAttribute('name','viewport');
        var content = 'initial-scale=';
        content += 1 / window.devicePixelRatio;
        content += ',user-scalable=no';
        meta.setAttribute('content', content);
        document.getElementsByTagName('head')[0].appendChild(meta);
    )();
//-->
</script>

这将为您在移动设备上提供最佳体验（图像渲染也很棒！）。我注意到在我的设备（不是 Android）上出现了一些奇怪的滚动/缩放问题，这消除了这一点。让我知道它是否有效:)

【讨论】：

谢谢大佬，我试试看！没想到我可以再期待这个问题的答案了。我会保持这个线程更新！ :)

好吧，这就像一个魅力！一个问题仍然是我以这种方式丢失了图像，并且我现在可以在网站上缩小。无论如何，现在解决了疯狂的滚动行为。谢谢！ :D

很高兴我能帮上一点忙！ :)