javascript 防止页面在焦点切换时滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12758021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preventing page from scrolling on focus switching
提问by soleshoe
I am new to mobile web/dev. My app is using jquery-mobile, phonegap and Compass (scss).
我是移动网络/开发的新手。我的应用程序使用 jquery-mobile、phonegap 和 Compass (scss)。
I have a problem on my login page :
我的登录页面有问题：
logo and fields are contained in standard 'div' containers (data-role="content" data-type="vertical"). Background is colored.
徽标和字段包含在标准的“div”容器中（data-role="content" data-type="vertical"）。背景是彩色的。
when switching focus from login field to password field, the page slides up, which is what I don-t want to occur. I would like my logo and fields to stay in place, just like the Skype iOS App login page.
将焦点从登录字段切换到密码字段时，页面会向上滑动，这是我不想发生的。我希望我的徽标和字段保持原样，就像 Skype iOS 应用程序登录页面一样。
here is what happens :
这是发生的事情：
I have tried several tricks, trying to block scroll events, or forcing page to scroll to 0,0, without success.
我尝试了几个技巧，试图阻止滚动事件，或者强制页面滚动到 0,0，但都没有成功。
I am thinking about a new strategy now, maybe using top relative positioning for logo and fields, and catching focus events to scroll the page myself, on keyboard slide up (by animating top relative positioning coordinates).
我现在正在考虑一种新的策略，也许使用徽标和字段的顶部相对定位，并在键盘向上滑动时捕获焦点事件以滚动页面（通过动画顶部相对定位坐标）。
Though this seems doable, I am wondering if this is the kind of work around used by the Skype iOS App team...
虽然这似乎可行，但我想知道这是否是 Skype iOS 应用程序团队使用的那种解决方法......
Any advice on technics used in this particular case is welcome!
欢迎对这种特殊情况下使用的技术提出任何建议！
cheers,
干杯，
Fred
弗雷德
回答by Gabriel Mahan
I think you want to call focus on the element directly and use the 'preventScroll' option.
我认为您想直接调用元素上的焦点并使用 'preventScroll' 选项。
el.focus({preventScroll: true});
el.focus({preventScroll: true});
$('#el').focus((e) => {
e.preventDefault();
e.target.focus({preventScroll: true});
})
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
回答by Jonathan Tonge
I haven't tested this yet, but does e.preventDefault() stop the issue? Generally you use e.preventDefault() to stop default scrolling / dragging behaviour.
我还没有测试过这个，但是 e.preventDefault() 能阻止这个问题吗？通常，您使用 e.preventDefault() 来停止默认滚动/拖动行为。
$(document).bind('focus', function(e){
e.preventDefault();
});
or better
或更好
$(element).bind('focus', function(e){
e.preventDefault();
});
or
或者
$(document).bind('touchstart', function(e){
e.preventDefault();
});
Would an input field work better?
输入字段会更好吗？
$(":input").live({
focus: function(e) {
e.preventDefault();
}
});
回答by soleshoe
I finally did not succeed in finding any coding solution to handle my problem, but I have noticed that a chirurgical positioning allowed me to frieze the screen when switching between fields.
我最终没有成功找到任何编码解决方案来处理我的问题，但我注意到，手术定位允许我在字段之间切换时对屏幕进行装饰。
The space available for the whole login screen must not exceed the space available once the keyboard is visible, that is 200 pixels. Further more, to prevent scrolling when switching field, the last input field center position must not exceed 100 pixels max. Using CSS it is possible to play on padding and margin to achieve the desired result.
整个登录屏幕的可用空间不得超过键盘可见后的可用空间，即 200 像素。此外，为了防止切换字段时滚动，最后一个输入字段中心位置不得超过 100 像素。使用 CSS 可以在 padding 和 margin 上进行播放以获得所需的结果。
It should be possible to get extra vertical space by removing the keyboard "fields navigation bar" but I don't know how to do that neither :/
通过删除键盘“字段导航栏”应该可以获得额外的垂直空间，但我也不知道该怎么做：/
回答by AlexMorley-Finch
I had a similar issue (with the page scrolling on click/focus) and it took me a while to find the solution so I'm documenting it here.
我有一个类似的问题（页面在点击/聚焦时滚动），我花了一段时间才找到解决方案，所以我在这里记录下来。
I had a custom form field that when clicked would scroll the page to the top. Turns out that the input was being hidden using position: absolute; top: -99999999px;(because if you hide it properly then the focus events don't work). This placed the hidden input at the top of the page. Then when we clicked the label and the input was focussed, the page was scrolled to the top.
我有一个自定义表单字段，单击该字段时会将页面滚动到顶部。结果是输入被隐藏了position: absolute; top: -99999999px;（因为如果你正确隐藏它，那么焦点事件就不起作用）。这将隐藏的输入置于页面顶部。然后当我们点击标签并聚焦输入时，页面滚动到顶部。
I was searching for things like "Scroll to top on focus/click" and all sorts but I couldn't find anything decent. The solution was to use right: -99999999pxinstead. I avoided using the typical left: -9999999pxbecause apparently that can affect the site when using direction: rtl;
我正在搜索诸如“在焦点/点击时滚动到顶部”之类的东西，但我找不到任何像样的东西。解决办法是right: -99999999px改用。我避免使用典型的，left: -9999999px因为显然这会在使用时影响网站direction: rtl;
