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 正在pageYOffsetwindow. 如果窗口发生移动,您可以对这些属性进行条件检查以做出响应:

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 回答