Предотвращение элемента <input> от прокрутки экрана на iPhone?

У меня есть несколько элементов <input type="number"> на моей веб-странице. Я использую jQTouch, и я стараюсь постоянно оставаться в полноэкранном режиме; то есть горизонтальная прокрутка плохая. Всякий раз, когда я нажимаю элемент <input>, страница прокручивается вправо, показывая черную рамку справа от экрана и децентрифрируя все. Входы смещены слева от экрана, и они начинаются где-то к середине страницы.

Как предотвратить эту прокрутку в фокусе?

Ответ 1

Я нашел решение этой проблемы в этом сообщении Остановить прокрутку страницы из фокуса

Просто добавьте onFocus="window.scrollTo(0, 0);" в поле ввода, и все готово! (Пробовал с помощью <textarea> и <input type="text" /> на iPad, но я уверен, что он тоже будет работать на iPhone.)

Я боялся, что прокрутка будет видна как мерцание или что-то в этом роде, но, к счастью, это не так!

Ответ 2

вот как я решил это на iPhone (мобильный Safari) (я использовал jQuery)

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

var currentScrollPosition = 0;
$(document).scroll(function(){
    currentScrollPosition = $(this).scrollTop();
});

2) привязать событие фокусировки к соответствующему полю ввода. когда сфокусированы, прокрутите документ до текущей позиции

$(".input_selector").focus(function(){
    $(document).scrollTop(currentScrollPosition);
});

Та Да! Нет раздражающего "прокрутки по фокусу"

Одна вещь, о которой нужно помнить... убедитесь, что поле ввода ВЫШЕ клавиатуру, иначе вы спрячете поле. Это можно легко смягчить, добавив if-clause.

Ответ 3

Я бы рекомендовал использовать метод jQuery.animate() связанный с выше, а не только window.scrollTo(0,0), так как iOS оживляет смещение страницы свойства при фокусировке входного элемента. Вызов window.scrollTo() только один раз может не работать со временем этой родной анимации.

Для получения дополнительной информации, iOS анимирует свойства pageXOffset и pageYOffset window. Вы можете выполнить условную проверку этих свойств, чтобы ответить, если окно сдвинулось:

if(window.pageXOffset != 0 || window.pageYOffset != 0) {
  // handle window offset here
}

Итак, чтобы расширить эту ссылку, это будет более полный пример:

$('input,select').bind('focus',function(e) { 
  $('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow'); 
});

Ответ 4

Если фокус задается программно, это то, что я сделал бы:

Сохраните значение scollTop окна перед изменением фокуса. Затем восстановите scrollTop до сохраненного значения сразу после настройки фокуса.

Если вы используете jQuery:

var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it

Ответ 5

Попробуйте это, я думаю, проблема заключается в масштабировании:

<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />