Как прокручивать страницу вниз при закрытом окне ввода?

Посмотрите эту страницу.

У меня есть страница с более низким "плавающей" фиксированной позицией div, которая покрывает некоторую часть нижней части экрана экрана, с высоким индексом z и множеством полей ввода.

Проблема заключается в том, что когда одно из нижних полей ввода сфокусировано, нажимая TAB, их содержимое частично скрывается div. Я хотел бы определить, когда сфокусированы нижние поля ввода, и прокрутите страницу вниз "достаточно", чтобы довести их до видимого места.

Есть ли чистый способ сделать это?

Изменить: мое решение работает, за исключением масштабирования браузера. Попробуйте его, например, на 144%. Любые идеи о том, как исправить?

ОТВЕТЫ

Ответ 1

Вот решение моего друга.

Кажется, хорошо работает в браузерах.

Все еще есть одно незначительное раздражение, что элемент имеет большую границу при выборе, а часть этого увеличенного края остается скрытой. Я всегда мог добавить лишний пиксель или два в свиток, но я уверен, что должно быть более элегантное решение.

Ответ 2

Решение Ripper234 хорошо работало для меня. Следующее решение для тех, чье поле покрывается элементом выше него (например, фиксированным навигатором), а не ниже него.

Я также анимировал его с помощью jQuery и добавил переменную дополнений, которая полезна, если у вас есть метка над полем, которое вы хотите показать, или хотите центрировать поле (просто установите отступ на половину высоты экрана).

var navHeight = 200;
var padding = 25;
$('input').on('focus', function() {
  try {
    var elemTop = $(this).offset().top;
    var maxVisible = $(document).scrollTop() + navHeight;
    if (elemTop < maxVisible) {
      $("html, body").animate({ scrollTop: elemTop - navHeight - padding }, 250);  
    } 
  } catch (e) {
    console.log("Error: " + e);
  }
});

Ответ 3

Что делать, если вы добавляете обработчик onfocus в каждое текстовое поле и проверяете, слишком ли оно расположено или находится близко к элементу "снизу", и когда вы соответствующим образом меняете положение этого элемента div (переместите его вниз/вверх).

Ответ 4

Я бы просто использовал Z-index, чтобы поместить сфокусированный вход над фиксированным div

Я не думаю, что есть общий способ переноса экрана вниз, возможно, я ошибаюсь.

возможно, вы можете сделать это с в странице ссылок, как это, поскольку они предназначены, чтобы вытащить экран вниз, использовать JQuery, чтобы сказать "когда этот вход находится в фокусе перейти к соответствующей точке привязки" 

<a href="#box5"><input type="text" /></a>

Ответ 5

element.scrollIntoView();

поддерживается во всех браузерах мэров, т.е. -6-7-8-9-10 firefox, webkit

или

element.focus(); element.blur();