jQuery 焦点不滚动

Question

如何将焦点集中到 HTML 元素（例如“a”）而不更改当前的滚动设置。

对于前。如果我使用：

$('#link').focus();

并且此链接在屏幕中不可见（例如位于可见区域下方），则浏览器向下滚动以显示该元素。如何在不移动滚动条的情况下设置焦点？我需要将滚动条保留在原来的位置。

我已经尝试过这个，但它会产生一些屏幕闪烁，这是一个黑客，而不是一个优雅的解决方案：

var st=$(document).scrollTop();
$('#link').focus();
$(document).scrollTop(st);

有人可以帮助我吗？

Answer 1

这对你来说如此困难的原因是因为你不应该这样做。浏览器旨在帮助用户避免执行此类操作的网站，因为具有焦点的链接将通过按键盘上的回车键或空格键来激活，并且用户很少希望点击他们不知道的链接。

尝试与浏览器合作而不是对抗它，通常会得到更满意的用户。

Answer 2

我有同样的问题，但用语言来说：我认为更优雅的解决方案是在元素位于视口中后给予焦点。

这是我复制/粘贴的内容（从该线程 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)"
                    });
                });
    }

});

Answer 3

尝试这个 jQuery 解决方案：

$('#link').select();

Answer 4

这对我有用

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);
}

Answer 5

试试这个：

$.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();

但我还没有测试过。

Answer 6

在 focus 方法上使用 {preventScroll: true} 选项。 https://developer.mozilla.org/en-US/docs /Web/API/HTMLElement/focus

如果使用 jQuery，请尝试 $('#el')[0].focus({preventScroll: true}) 或迭代集合中的每个元素

Answer 7

$('#link').css('position', 'fixed').focus().css('position', 'static') 适用于 Firefox。

（编辑：您不应该使用此技巧）