-webkit-overflow-scrolling: коснитесь и "Нажмите строку состояния, чтобы перейти вверх"

Ответ 1

Если вы поместите -webkit-overflow-scrolling:touch на любой элемент, отличный от document.body, он сломает строку состояния по умолчанию, чтобы перейти к верхнему поведению.

В GitHub есть крошечный script, который работает как замена отсутствующего прокрутки до прокрутки переполнения iOS. Вы можете поместить его в заголовок приложения, чтобы достичь почти того же результата.

Ответ 2

Из моего опыта это действительно влияет на него. Я не знаю, как обе функции работают одновременно, по крайней мере, с iOS 6.1.

У меня также есть цитата из jQuery Mobile docs, которая поддерживает это:

Функция -webkit-overflow-scrolling: touch, похоже, отключает события, чтобы прокручивать вас до верхней части страницы, когда время отображается в строке состояния. Мы надеемся, что Apple исправит это, потому что это очень полезная функция.

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

Ответ 3

Ваша скрипка не разрушает поведение "Status status bar to scroll to top", потому что вы применили -webkit-overflow-scrolling: touch; к элементу body. Если вы применяете его к любому элементу внутри body, поведение прерывается.

Ответ 4

Есть способ обойти это - 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);

Ответ 5

Как отмечалось в большинстве ответов, размещение -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, связанный с ним, выглядит как еще одно отличное решение.