Проблемы с сенсорным прокруткой на iOS при фокусировке входов

У меня возникают проблемы с прокручиваемым div на iOS. При попытке прокрутки, касаясь внешнего входа, он прокручивается нормально без каких-либо проблем, но когда я пытаюсь прокручивать, и я касаюсь ввода, чтобы начать прокрутку (есть много шансов, что это происходит, потому что это div с большим количеством входов), она прокручивает все окно, а затем прокручивает div. У меня нет этой проблемы ни на рабочем столе, ни на Android. Я нашел аналогичный вопрос (iOS HTML Input Tag останавливает прокрутку в прокручиваемом элементе), но у него также нет ответа. Хотя я не нашел подходящего решения, я решил предотвратить событие touchmove, когда пользователь касается ввода, но это не совсем то, что я хочу.

Возможно, кто-то уже столкнулся с этой проблемой и может помочь. Я был бы очень признателен, спасибо заранее.

Ответ 1

Чтобы получить прокрутку прокрутки на iOS 5+, вам понадобится:

div {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

Источник: Overflow

Возможно, вам также понадобится:

div > * {
    -webkit-transform: translateZ(0px);
}

Источник: Подобный вопрос в переполнении стека

Источник 2: Другой подобный вопрос

Ответ 2

Этот материал заставил меня сходить с ума, после тестирования всего, я нашел следующий ответ от Thomas Bachem здесь и упростил его в jquery.

Просто добавьте класс scrollFix к входам, и вы готовы к работе. (или непосредственно применить это js к любым входам/текстовым полям, используя $('input, textarea')

Теперь, когда вы касаетесь и прокручиваете ввод на iOS 8+, вход получает все его "указатели-события" отключенными (включая проблемное поведение). Эти "указатели-события" активируются, когда мы обнаруживаем простое касание.

$('.scrollFix').css("pointer-events","none");

$('body').on('touchstart', function(e) {
    $('.scrollFix').css("pointer-events","auto");
});
$('body').on('touchmove', function(e) {
    $('.scrollFix').css("pointer-events","none");
});
$('body').on('touchend', function(e) {
    setTimeout(function() {
        $('.scrollFix').css("pointer-events", "none");
    },0);
});

Ответ 3

Хакерное обходное решение, но, сделав это, я смог выполнить прокрутку даже на входных формах. JS заставляет reflow в движке рендеринга, в котором находится ошибка в iOS8 Safari. Изменение высоты на авто также улучшало прокрутку при фокусировке на элементе формы, поскольку прокрутка принудительно обрабатывается браузером при фокусировке.

Разметка:

<div class="modal-backdrop-container">
  <div class="modal-backdrop">
    <div class="modal> <!-- Content --> </div>
  </div>
</div>

CSS

.modal-backdrop-container {
    z-index: 10;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
}
.modal-backdrop {
    z-index: 10;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.modal {
    position: relative;
    width: 400px;
    max-width: 100%;
    margin: auto;
    background-color: white;
}

JS:

// reflow when changing input focus
        $modalInputs = $('.modal').find(':input');
        modalInputs.on('focus', function() {
            var offsetHeight = modal.$backdrop[0].offsetHeight;
            modal.$backdropContainer.css({
                'height': 'auto'
            });
        });
        modalInputs.on('blur', function() {
            var offsetHeight = modal.$backdrop[0].offsetHeight;
            modal.$backdropContainer.css({
                'height': ''
            });
        });

Не требуется строка var offsetHeight = modal.$backdrop[0].offsetHeight;, так как и это, и изменение значения высоты должны принудительно произвести оплату.

Ответ 4

html { 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch;
}