如何关注HTML元素(例如“a”)并且不要更改当前的滚动设置。
对于前。如果我使用:
$('#link').focus();
并且此链接在屏幕中不可见(例如,在可见区域旁边),浏览器向下滚动以显示元素。如何在没有滚动条移动的情况下设置焦点?我需要将滚动条保留在原始位置。
我试过这个,但它会产生一些屏幕闪烁,这是一个黑客,而不是一个优雅的解决方案:
var st=$(document).scrollTop();
$('#link').focus();
$(document).scrollTop(st);
有人可以帮帮我吗?
答案 0 :(得分:43)
试试这个:
$.fn.focusWithoutScrolling = function(){
var x = window.scrollX, y = window.scrollY;
this.focus();
window.scrollTo(x, y);
return this; //chainability
};
然后
$('#link').focusWithoutScrolling();
编辑:
据报道,这在IE10中不起作用。可能的解决方案是使用:
var x = $(document).scrollLeft(), y = $(document).scrollTop();
但我还没有测试过。
答案 1 :(得分:3)
这对你来说太难了是因为你不应该这样做。浏览器旨在帮助用户避免执行此类操作的网站,因为通过点击键盘上的返回或空格来激活具有焦点的链接,并且用户很少希望关注他们不知道的链接。
尝试使用浏览器而不是反对它,您通常会得到更快乐的用户。
答案 2 :(得分:3)
在焦点方法上使用{preventScroll: true}
选项。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
如果使用jQuery尝试$('#el')[0].focus({preventScroll: true})
或迭代你的集合中的每一个
答案 3 :(得分:2)
$('#link').css('position', 'fixed').focus().css('position', 'static')
适用于Firefox。
(编辑:你不应该使用这个黑客)
答案 4 :(得分:1)
我遇到了同样的问题,但是用语言来说:我认为更优雅的解决方案是在元素位于视口中时给予焦点。
这里是我复制/粘贴的内容(从此帖子Jquery check if element is visible in viewport向亚行提供的赞誉)
$.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)"
});
});
}
});
答案 5 :(得分:0)
试试这个jQuery解决方案:
$('#link').select();
答案 6 :(得分:0)
这对我有用
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);
}