jQuery 没有滚动的jQuery焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4898203/
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
jQuery focus without scroll
提问by buzoganylaszlo
How can I focus to a HTML element (ex. "a") and do not change the current scroll settings.
如何聚焦于 HTML 元素（例如“a”）并且不更改当前滚动设置。
For ex. if I use:
例如。如果我使用：
$('#link').focus();
and this link is not visible in the screen (ex. is bellow the visible area) the browser scrolls down to show the element. How can I set the focus without scrollbar movement? I need to stay the scrollbar in the original place.
并且此链接在屏幕中不可见（例如在可见区域下方）浏览器向下滚动以显示该元素。如何在不移动滚动条的情况下设置焦点？我需要将滚动条留在原来的位置。
I have tried this, but it produces some screen flickering, and it is a hack, not an elegant solution:
我试过这个，但它会产生一些屏幕闪烁，这是一个黑客，而不是一个优雅的解决方案：
var st=$(document).scrollTop();
$('#link').focus();
$(document).scrollTop(st);
Can somebody help me, please?
有人可以帮我吗？
回答by Felipe Martim
Try this:
尝试这个：
$.fn.focusWithoutScrolling = function(){
var x = window.scrollX, y = window.scrollY;
this.focus();
window.scrollTo(x, y);
return this; //chainability
};
and then
进而
$('#link').focusWithoutScrolling();
Edit:
编辑：
It's been reported that this doesn't work in IE10. The probable solution would be to use:
据报道，这在 IE10 中不起作用。可能的解决方案是使用：
var x = $(document).scrollLeft(), y = $(document).scrollTop();
but I haven't tested it.
但我还没有测试过。
回答by Dan Eastwell
Use {preventScroll: true}option on the focus method. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
使用{preventScroll: true}焦点方法的选项。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
If using jQuery try $('#el')[0].focus({preventScroll: true})or iterate over each in your collection
如果使用 jQuery 尝试$('#el')[0].focus({preventScroll: true})或迭代您集合中的每个
回答by jd.
$('#link').css('position', 'fixed').focus().css('position', 'static')works in Firefox.
$('#link').css('position', 'fixed').focus().css('position', 'static')在 Firefox 中工作。
(Edit: You should not use this hack)
（编辑：你不应该使用这个黑客）
回答by Martin Jespersen
The reason why this is so hard for you is because you aren't supposed to do it. The browsers are designed to help the user avoid websites that do stuff like this, because a link the has focus will activate by hitting return or space on the keyboard, and users rarely wish to follow a link they are not aware is there.
这对您来说如此困难的原因是因为您不应该这样做。浏览器旨在帮助用户避开执行此类操作的网站，因为通过按键盘上的返回或空格键将激活具有焦点的链接，而用户很少希望点击他们不知道的链接。
Try to work with the browser instead of against it, and you will usually end up with happier users.
尝试使用浏览器而不是反对它，您通常会得到更快乐的用户。
回答by Dave Powell
I have the same problem, but in words: I think a more elegant solution would be to give the focus once the element is in the viewport.
我有同样的问题，但一句话：我认为一个更优雅的解决方案是在元素位于视口中时给予焦点。
Here's what I copy/pasted (Kudos to ADB from this thread Jquery check if element is visible in viewport)
这是我复制/粘贴的内容（从这个线程向 ADB致敬 Jquery 检查元素是否在视口中可见）
$.fn.inView = function(){
if(!this.length) return false;
var rect = this.get(0).getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
window.$(window).on('scroll',function(){
if( $('#elementcontainingfocus').inView() ) {
$(function() {
$("#elementcontainingfocus input").focus();
$("input[type=text]:focus").css({
"box-shadow": "0 0 5px rgba(81, 203, 238, 1)",
"border": "1px solid rgba(81, 203, 238, 1)"
});
});
}
});
回答by Ripper
Try this jQuery solution:
试试这个 jQuery 解决方案：
$('#link').select();
回答by Martin
This worked for me
这对我有用
var focusWithoutScrolling = function(element) {
var fixed = { "position": "fixed" };
var posStatic = { "position": "static" };
$(":root").css(fixed);
$("body").css(fixed);
$("html").css(fixed);
$(element).focus();
$(":root").css(posStatic);
$("body").css(posStatic);
$("html").css(posStatic);
}
