24

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

如何防止焦点滚动？

4

5 回答 5

18

我刚刚在这篇文章中找到了解决此问题的方法Stop page scrolling from focus

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

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

于 2011-09-16T23:44:24.903 回答
7

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

1）创建一个保存当前滚动位置的全局变量，每次用户滚动视口时都会更新该变量

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

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

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

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

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

于 2011-10-31T02:15:31.383 回答
3

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

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

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'); 
});
于 2011-11-17T00:53:52.037 回答
0

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

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

如果使用 jQuery：

var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it
于 2012-12-26T17:43:56.427 回答
-3

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

<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
于 2014-01-30T23:56:16.527 回答