iOS Safari: предотвращение (или контроль) прокрутки при фокусе ввода - PullRequest
Новая
       55

iOS Safari: предотвращение (или контроль) прокрутки при фокусе ввода

0 голосов
/ 22 марта 2020

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

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

В прикрепленном GIF вы можете видеть поведение, которое я вижу, а затем прокручиваю в конце, чтобы указать, что я хотел бы произойти, как только сработает фокусное событие.

scrolling behavior

Одна вещь, которую я нашел, работает подобным образом, но я хотел бы что-то лучше: следующий код работает, но имеет заметную задержку между прокруткой, которую вы видите в GIF, и окном, возвращающимся в положение, которое мне нравится , Кроме того, если я настрою setTimeout() время ниже ~ 400, это не сработает. Есть ли у iOS какой-то блок во время удара прокрутки фокуса? 

element.addEventListener('focus', (e) => { setTimeout(() => { window.scroll(0,0) }, 500) });

Обновление № 1

Пока единственное решение, которое я попробовал, что сработало следующее, что выглядит довольно дерзко (где scrollLock определено в других местах focus и blur слушателей): 

document.addEventListener('scroll', (e) => {
    if (scrollLock && document.documentElement.scrollTop > 100) {
        document.documentElement.scrollTop = 100;
    }
});

Все решения, включающие preventDefault() или window.scroll вызовы не помешали прокрутке, изображенной выше, но активно контролируют прокрутку и заставляют ее вернуться туда, где я хочу, чтобы она работала. Хотелось бы, чтобы это не было ответом, однако!

...