更改焦点表单元素时禁用滚动ipad web应用程序
我有一个networking应用程序。 我试图禁用/防止滚动发生在你关注不同的表单input时（即，当你通过表单中的input元素前进时发生的滚动）。
我已经禁用了这个滚动：
<script type="text/javascript"> $(document).ready(function() { document.ontouchmove = function(e){ e.preventDefault(); } }); </script> 添加更多的信息 – 我有一些“幻灯片”，我的网页组成。 每个都是768×1024，他们是“堆叠”在页面上（即页面是768×3072 [1024 * 3 = 3072]），当你点击一个链接我使用scrollTo jquery插件滚动到下一个“幻灯片”和.focus()在input元素上。
有谁知道如何做到这一点？
我发现，在UIWebView中，document.body有时也被移动。 所以我使用：
input.onfocus = function () { window.scrollTo(0, 0); document.body.scrollTop = 0; }
哎呀， window.scrollTobuild议是有点不好，使事情变得不可预测。
试试更好的解决scheme：
jQuery('body').bind('focusin focus', function(e){ e.preventDefault(); })
或者，只需勾选您的input：
jQuery('input.your-input-class').bind('focusin focus', function(e){ e.preventDefault(); })
为什么？ 浏览器可以将焦点表单元素默认滚动到“focusin”事件触发的视图中（Firefox有一个错误，所以重点关注焦点）。 所以，只要告诉他们不要那么明确。
顺便说一句，如果focus事件是由你的代码中的element.focus()触发的，那么即使是在解决scheme将无法正常工作。
所以，一个解决scheme将取代你focus触发select ，即
element.select()
除了element.focus()
如果你不喜欢element.select()方法，因为它会selectinput元素中的文本，然后尝试创build一个input元素文本的Range object ，如果你愿意的话，可以把它折叠起来，抱歉没时间去试试在这一刻。
如果你不希望input是可编辑的，kpozin的答案很好。 但是，只要删除readonly属性onfocus或onclickinput字段再滚动焦点。
真正有帮助，并不影响焦点或input文字的能力是添加onFocus="window.scrollTo(0, 0);" 到input元素。
当然，你必须保证相关的input不被屏幕键盘覆盖！
另见这篇文章： 防止一个<input>元素在iPhone上滚动屏幕？
更新这个 – 我已经看到了window.scroll(0,0)解决scheme在几个不同的地方，但它似乎只是使情况变得更糟。 我在页面上有多个内嵌文本input，所以当在它们之间移动焦点时，Safari中的自动上下滚动使得页面几乎不可用，特别是在横向方向上。
在与iOS8战斗了一个星期后，我发现这停止了滚动。 这在将焦点从一个元素转换到另一个元素时起作用，因为您需要将onblur事件附加到某个事件上：
var moveFocus = function (blurId, focusId) { var blurInput = document.getElementById(blurId); var focusInput = document.getElementById(focusId); if (blurInput && focusInput) { blurInput.onblur = function () { if (focusInput.setSelectionRange && focusInput.setSelectionRange()) { var len = focusInput.value.length; focusInput.setSelectionRange(len, len); } focusInput.focus(); }; focusInput.focus(); }; };
为了防止浏览器滚动到您移动焦点的元素，我使用jQuerys one事件侦听器。 在将焦点移动到元素之前，我们将侦听器添加到scroll事件和计数器滚动。 事件监听器不是由jQuery删除的。
var oldScroll = $(window).scrollTop(); $( window ).one('scroll', function() { $(window).scrollTop( oldScroll ); //disable scroll just once }); $('.js-your-element').focus();
这种方式看起来很简单，对我很有效，而且在我所做的所有testing中都很出色。
希望它可以帮助别人。
试试BLSully 这个答案 。 将所有的input元素初始化为readonly="readonly"属性。 这将阻止移动Safari浏览器。 删除焦点上的属性，并将其添加到每个元素的模糊。
这工作对我来说（使用jQuery）。 它允许滚动，然后返回到正确的位置，当你离开input。
var saveScrollLeft; $("input, textarea") .focus(function () { clearTimeout(blurTimeoutId); saveScrollLeft = $("body").scrollLeft(); }) .blur(function () { // The user might be moving from one input to another, so we don't want to quickly scroll on blur. Wait a second and see if they are off all inputs. blurTimeoutId = setTimeout(function () { $(window).scrollLeft(saveScrollLeft); }, 1000); });
没有提供的解决scheme为我工作。 由于抓取焦点的forms（以及滚动页面初始显示到所述表单）低于折叠，所以我只是在表单中添加了淡入（fade-in）。
所以我添加了一个名为fade-in的类名，相应的css display:none
使用jQuery我只是简单地做jQuery(".fade-in").fadeIn(); 文件准备好后，问题就没有了。
这显然不限于使用jQuery。 香草js可以用于淡入淡出。
