防止 <input> 元素在 iPhone 上滚动屏幕？

Posted 2023-02-23

【中文标题】防止 <input> 元素在 iPhone 上滚动屏幕？

【英文标题】：Preventing an <input> element from scrolling the screen on iPhone?

【发布时间】：2011-02-26 12:33:16

【问题描述】：

我的网页上有几个<input type="number"> 元素。我正在使用 jQTouch，并且我试图始终保持全屏状态；也就是说，水平滚动不好。每当我单击<input> 元素时，页面会向右滚动，在屏幕右侧显示黑色边框并使所有内容偏离中心。输入从屏幕左侧偏移，它们从页面中间的某个位置开始。

如何防止焦点滚动？

【问题讨论】：

Disable scrolling when changing focus form elements ipad web app的可能重复

关于那个问题和这个问题的答案都不正确。

【参考方案1】：

我刚刚在Stop page scrolling from focus这个帖子里找到了解决这个问题的方法

只需将onFocus="window.scrollTo(0, 0);" 添加到您的输入字段即可！ （在 iPad 上使用 <textarea> 和 <input type="text" /> 进行了尝试，但我很确定它也可以在 iPhone 上使用。）

我担心滚动会显示为闪烁或其他东西，但幸运的是事实并非如此！

【讨论】：

完美解决方案 - 在 iPod5 ios7 上测试！

这似乎应该可以工作，但它不适用于我在 Safari 中使用 iOS 8 的 iPhone 5S。 event.preventDefault() 结合您的解决方案似乎肯定会起作用，但我仍然得到默认的滚动行为。

在 iPhone5 iOS10 cordova 7.1.0 上不工作检查 cacheflowes 答案。

【参考方案2】：

这是我在 iPhone（移动 Safari）上解决这个问题的方法（我使用了 jQuery）

1) 创建一个全局变量来保存当前滚动位置，并在每次用户滚动视口时更新

var currentScrollPosition = 0;
$(document).scroll(function()
    currentScrollPosition = $(this).scrollTop();
);

2) 将焦点事件绑定到有问题的输入字段。聚焦时，让文档滚动到当前位置

$(".input_selector").focus(function()
    $(document).scrollTop(currentScrollPosition);
);

哒哒！没有烦人的“焦点滚动”

要记住的一件事...确保输入字段位于键盘上方，否则您将隐藏该字段。这可以通过添加 if 子句轻松缓解。

【参考方案3】：

我建议使用 jQuery.animate() 方法 linked to above，而不仅仅是 window.scrollTo(0,0)，因为当输入元素获得焦点时，iOS 会为页面偏移属性设置动画。仅调用一次 window.scrollTo() 可能不适用于此原生动画的时间。

有关更多背景信息，iOS 正在为window 的pageXOffset 和pageYOffset 属性设置动画。如果窗口发生移动，您可以对这些属性进行条件检查以做出响应：

if(window.pageXOffset != 0 || window.pageYOffset != 0) 
  // handle window offset here

因此，为了扩展上述链接，这将是一个更完整的示例：

$('input,select').bind('focus',function(e)  
  $('html, body').animate(scrollTop:0,scrollLeft:0, 'slow'); 
);

【讨论】：

确认，设置 scrollTop 不起作用，用最少 1 毫秒的时间对其进行动画处理。用 0 毫秒动画它没有 - 可能需要将它添加到事件队列或其他东西

跳动行为有什么解决办法吗？当页面向上滚动然后再次向下翻转时，它看起来很糟糕。 preventDefault() 没有帮助

【参考方案4】：

如果以编程方式设置焦点，我会这样做：

在改变焦点之前保存窗口的 scollTop 值。然后在设置焦点后立即将scrollTop恢复为保存的值。

如果使用 jQuery：

var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it

【参考方案5】：

试试这个，我认为问题在于缩放：

<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

【讨论】：

这是一个实际的解决方案，将 添加到我的页面修复了滚动。