JQuery фокус без прокрутки

Question

Как я могу сфокусироваться на элементе HTML (например, "a") и не изменять текущие настройки прокрутки.

Например,если я использую:

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

, и эта ссылка не отображается на экране (например, ниже видимой области), браузер прокручивается вниз, чтобы показать элемент.Как я могу установить фокус без движения полосы прокрутки?Мне нужно, чтобы полоса прокрутки оставалась на прежнем месте.

Я пробовал это, но оно вызывает некоторое мерцание экрана, и это взломанное, не элегантное решение:

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

Можеткто-нибудь, помогите мне, пожалуйста?

Answer 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();

, но я не проверял это.

Answer 2

Используйте параметр {preventScroll: true} в методе фокусировки. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Если вы используете jQuery, попробуйте $('#el')[0].focus({preventScroll: true}) или переберите каждый из них в вашей коллекции

Answer 3

Причина, по которой это так сложно для вас, заключается в том, что вы не должны этого делать. Браузеры предназначены для того, чтобы помочь пользователям избегать веб-сайтов, которые делают подобные вещи, потому что активируется ссылка, на которую наведен фокус, путем нажатия клавиши возврата или пробела на клавиатуре, и пользователи редко хотят перейти по ссылке, которой они не знают.

Попробуйте работать с браузером, а не против него, и вы, как правило, в конечном итоге получите более счастливых пользователей.

Answer 4

$('#link').css('position', 'fixed').focus().css('position', 'static') работает в Firefox.

( Редактировать : Вы не должны использовать этот хак)

Answer 5

У меня та же проблема, но на словах: я думаю, что более элегантным решением было бы выделить фокус, когда элемент находится в области просмотра.

Вот что я копирую / вставляю (Слава в 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)"
                    });
                });
    }

});

Answer 6

Это сработало для меня

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 7

Попробуйте это решение jQuery:

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