Перейдите к этой скрипте на iPhone и обратите внимание, что даже если есть объявление -webkit-overflow-scrolling:touch, функция 'tap to top' работает. Это было протестировано на iPhone 4 под управлением iOS 6.1 и iPhone 4S с iOS 5.0.1.
В этом тесте возникает вопрос: объявляет -webkit-overflow-scrolling:touch повлиять на поведение в строке состояния "коснуться состояния" в iOS?
Если вы поместите -webkit-overflow-scrolling:touch на любой элемент, отличный от document.body, он сломает строку состояния по умолчанию, чтобы перейти к верхнему поведению.
В GitHub есть крошечный script, который работает как замена отсутствующего прокрутки до прокрутки переполнения iOS. Вы можете поместить его в заголовок приложения, чтобы достичь почти того же результата.
Из моего опыта это действительно влияет на него. Я не знаю, как обе функции работают одновременно, по крайней мере, с iOS 6.1.
У меня также есть цитата из jQuery Mobile docs, которая поддерживает это:
Функция -webkit-overflow-scrolling: touch, похоже, отключает события, чтобы прокручивать вас до верхней части страницы, когда время отображается в строке состояния. Мы надеемся, что Apple исправит это, потому что это очень полезная функция.
Неудивительно, что Apple настроена таким образом, так как я тоже хотел бы использовать эту функцию, но для меня важнее способность прокрутки к вершине.
Ваша скрипка не разрушает поведение "Status status bar to scroll to top", потому что вы применили -webkit-overflow-scrolling: touch; к элементу body. Если вы применяете его к любому элементу внутри body, поведение прерывается.
Есть способ обойти это - http://www.artspot.eu/blog/2010/12/29/extending-iscroll-scroll-to-the-top-by-tapping-the-status-bar/
Matteo Spinelli, создатель iScroll, показывает в чириканье, что это на самом деле не трудно добиться этого. Когда вы нажимаете строку состояния, вызывается событие прокрутки на объекте окна. Использование события то вы можете легко вызвать функцию scrollTo для прокрутки до в верхней части списка.
window.addEventListener('scroll', function(){ yourscrollobject.scrollTo(0,0,duration); }, false);
Как отмечалось в большинстве ответов, размещение -webkit-overflow-scrolling: touch на любом элементе, отличном от document.body, вызывает проблемы. Если вы используете фиксированный заголовок и не хотите добавлять какие-либо зависимости, это должно сделать трюк для всех, кто использует JQuery:
$('.fixed-header').on('click',function(e){
var $scrollingElement = $('.scrolling-element');
$scrollingElement.css('overflow','hidden');
$scrollingElement.animate({ scrollTop: 0 }, "fast", function() {
$scrollingElement.css('overflow','auto');
});
});
Цель переключения свойства overflow - для устройств, использующих импульсную прокрутку. Это немедленно останавливает любой момент и выполняет анимацию прокрутки. Я сделал элемент прокрутки переменной только для того, чтобы мы не обращали много раз на запрос DOM несколько раз. Надеюсь, это поможет кому-то отправиться в путь. Если вы предпочтете разобраться в этом, проект github @patrick, связанный с ним, выглядит как еще одно отличное решение.