我有一个网络应用。我正在尝试禁用/阻止当您关注不同的表单输入时发生的滚动(即,当您在表单中的输入元素中前进时发生的滚动)。
我已经禁用了滚动,如下所示:
<script type="text/javascript">
$(document).ready(function() {
document.ontouchmove = function(e){
e.preventDefault();
}
});
</script>
为了添加更多的信息-我有一些“幻灯片”,我的页面组成。它们的大小都是768x1024,它们被“堆叠”在页面上(即页面是768x3072 1024*3=3072),当你点击一个链接时,我正在使用scrollTo jquery插件滚动到下一个“幻灯片”,并在输入元素上使用.focus()
。
有人知道怎么做吗?
发布于 2012-02-16 02:16:52
我发现在UIWebView中,document.body有时也会被移动。所以我使用:
input.onfocus = function () {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}
发布于 2015-07-17 17:42:10
哦,window.scrollTo
建议的有点糟糕,让事情变得不可预测。
尝试这个更好的解决方案:
jQuery('body').bind('focusin focus', function(e){
e.preventDefault();
})
或者,只是挂接你的输入:
jQuery('input.your-input-class').bind('focusin focus', function(e){
e.preventDefault();
})
为什么?默认情况下,浏览器可能会将聚焦的表单元素滚动到视图中,并触发'focusin‘事件(Firefox有一个bug,所以请改为挂钩focus )。所以,只要告诉他们不要明确这么做就行了。
顺便说一句,如果focus
事件是由代码中的element.focus()
触发的,那么即使是in解决方案也不会起作用。
因此,一个解决方案是将您的focus
触发器替换为select
,即
element.select()
element.focus()
之外的其他
如果您不喜欢element.select()
方法,因为它会输入元素中的文本,那么可以尝试创建一个select
元素文本的Range object
并折叠它,很抱歉现在没有时间尝试。
发布于 2016-09-20 09:48:23
为了防止浏览器滚动到您将焦点移动到的元素,我使用了jQuerys one
事件侦听器。在我将焦点移到元素之前,我们将侦听器添加到scroll
事件和计数器滚动中。然后由jQuery删除事件侦听器。
var oldScroll = $(window).scrollTop();
$( window ).one('scroll', function() {
$(window).scrollTop( oldScroll ); //disable scroll just once
});
$('.js-your-element').focus();
这种方法对我来说似乎简单有效,并且在我做过的所有测试中都很有效。
希望这能帮助到别人。
https://stackoverflow.com/questions/6740253
复制相似问题