У меня есть несколько элементов <input type="number"> на моей веб-странице. Я использую jQTouch и всегда стараюсь оставаться в полноэкранном режиме; то есть горизонтальная прокрутка — это плохо. Всякий раз, когда я нажимаю элемент <input>, страница прокручивается вправо, показывая черную рамку в правой части экрана и децентрируя все. Входные данные смещены от левого края экрана и начинаются где-то ближе к середине страницы.
Как я могу предотвратить эту прокрутку в фокусе?
Я только что нашел решение этой проблемы в этом сообщении Остановить прокрутку страницы из фокуса
Просто добавьте onFocus="window.scrollTo(0, 0);" в поле ввода, и все готово! (Пробовал с <textarea> и <input type="text" /> на iPad, но уверен, что и на iPhone сработает.)
Я боялся, что прокрутка будет видна как мерцание или что-то в этом роде, но, к счастью, это не так!
event.preventDefault() в сочетании с вашим решением кажется, что это определенно сработает, но я все еще получаю поведение прокрутки по умолчанию.
- person Benny; 17.03.2015
вот как я решил это на iPhone (мобильный Safari) (я использовал jQuery)
1) создать глобальную переменную, которая содержит текущую позицию прокрутки и обновляется каждый раз, когда пользователь прокручивает область просмотра
var currentScrollPosition = 0;
$(document).scroll(function(){
currentScrollPosition = $(this).scrollTop();
});
2) привязать событие фокуса к рассматриваемому полю ввода. когда он сфокусирован, прокручивайте документ до текущей позиции
$(".input_selector").focus(function(){
$(document).scrollTop(currentScrollPosition);
});
Та Да! Нет надоедливой "прокрутки фокуса"
Следует иметь в виду одну вещь... убедитесь, что поле ввода находится НАД клавиатурой, иначе вы скроете это поле. Это можно легко смягчить, добавив условие if.
Я бы порекомендовал использовать метод 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');
});
Если фокус устанавливается программно, я бы сделал следующее:
Сохраните значение scollTop окна перед изменением фокуса. Затем восстановите scrollTop до сохраненного значения сразу после установки фокуса.
При использовании jQuery:
var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it
Попробуйте это, я думаю, проблема в масштабе:
<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
