没有滚动的jQuery焦点答案

【问题标题】：jQuery focus without scroll没有滚动的jQuery焦点
【发布时间】：2011-02-04 12:57:13
【问题描述】：

我怎样才能专注于 HTML 元素（例如“a”）而不更改当前滚动设置。

例如。如果我使用：

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

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

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

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

有人可以帮帮我吗？

【问题讨论】：

为什么要让焦点控件不可见？也许还有另一种方法可以实现您正在寻找的功能。
我正在尝试制作图片库。有迷你缩略图（#link-s）。我想在该迷你图像上绑定下一个和上一个键事件处理程序，该处理程序会自动在屏幕的其他部分显示大图像。而且我不希望浏览器转到迷你图像，只是停留在大图像应该可见的地方。如果我不改变焦点，我无法绑定迷你图像中的关键事件......所以它很复杂......
你可能想为ie使用setActive函数

标签： jquery focus scrollbar scroll

【解决方案1】：

试试这个：

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

但我没有测试过。

【讨论】：

别忘了返回这个；在关闭函数之前......如果你喜欢链接的话。
好答案...刚刚测试过，它可以工作，但在 IE 10 中不行...真奇怪！ xD
也不适用于 Firefox 和 Chrome for Android。
我最终使用pageXOffset 而不是scrollX 使其适用于IE11 developer.mozilla.org/en-US/docs/Web/API/Window/scrollX >为了跨浏览器兼容性，请使用window.pageXOffset 而不是window.scrollX。
最终使用.focus({preventScroll: true});

【解决方案2】：

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

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

【讨论】：

焦点选项仅在 Chrome 中受支持，如果您检查上面答案中的链接，您会看到。但否则这是一个很好的解决方案。在某些情况下，您还需要在事件上添加 preventDefault。
不再只是 Chrome，大多数浏览器除了 IE（Edge 也可以）和 Safari。

【解决方案3】：

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

尝试使用浏览器而不是反对它，您通常会得到更快乐的用户。

【讨论】：

你可以通过 .focus 元素并立即 .blur() 它来解决这个问题
我可以看到希望将键盘焦点放在不在屏幕上的元素上的合法用途。我不认为让用户跳到他们通过按键激活的按钮会让他们更快乐。
Hey PHearst...我尝试了你的逻辑，但它使用第一个部分页面控件而不是其他部分页面控件:(
我不同意这一点。这与安全原因无关。这没有任何意义。如果有人愿意，他们可以抓住回车键或空格键并通过 JS 手动激活链接。它滚动的唯一原因是浏览器希望这是所需的行为，但在合法的时候它不会。例如，我正在加载一个弹出窗口，底部有一条消息和一个回复框。我希望回复框自动聚焦，以便有人可以开始输入来撰写回复，但我希望窗口始终加载在消息的顶部。这是很好的用户体验设计。

【解决方案4】：

$('#link').css('position', 'fixed').focus().css('position', 'static') 在 Firefox 中工作。

（编辑：你不应该使用这个hack）

【讨论】：

Chrome 似乎坚持在其 CSS 位置属性设置回静态或相对时立即滚动到焦点元素的位置。如果您将目标包装在相对定位的
中，我得到了一个有效的测试，目标获得绝对位置。我不知道这在您的特定情况下如何工作。

【解决方案5】：

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

这是我复制/粘贴的内容（来自此线程 Jquery check if element is visible in viewport 向 ADB 致敬）

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

});

【讨论】：

【解决方案6】：

试试这个 jQuery 解决方案：

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

【讨论】：

这并没有什么作用，它与输入元素中的文本选择有关，它不影响键盘焦点。

【解决方案7】：

这对我有用

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

【讨论】：