JQuery Mobile предотвращает прокрутку вверх до перехода страницы?

Ответ 1

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

Если вы были на полпути вниз длинным списком на одной странице (скажем, 1000px), а страница, на которую вы переходите, составляет всего несколько сотен пикселей, тогда текущая страница будет анимировать с экрана должным образом, но новая страница не будет быть видимым, поскольку это было бы выше области просмотра.

Существует 2 жизнеспособных решения:

1. iScroll и его jQuery Mobile деривация iScrollview

Домашняя страница iScroll: http://cubiq.org/iscroll-4

Домашняя страница iScrollview: https://github.com/watusi/jquery-mobile-iscrollview

iScroll - это javascript, который может прокручивать содержимое в окне в веб-браузере с очень похожим поведением на обычную прокрутку на мобильных устройствах, таких как iPhone и Android. Это означает, что вы можете прокручивать окно в браузере, используя собственные полосы прокрутки и физику.

Это тоже решение для нашей текущей проблемы. Из-за страниц внедрения iScroll будут занимать 100% высоты страницы, независимо от того, как далеко прокручивается список. Это также является причиной того, что при возврате listview будет оставаться в одной позиции.

Конечно, если вы хотите реализовать это решение, вы должны выбрать реализацию iScrollview. Вы все равно сможете реализовать iScroll, но вам потребуется гораздо больше времени.

2. Тихая прокрутка

Официальная документация: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

Эта функциональность jQuery Mobile также является той же причиной, почему у нас есть эта проблема в первую очередь. Перед началом перехода страницы исходная страница тихо прокручивается вверх.

В нашем случае, когда выбрано listview, его необходимо запомнить (здесь, вы найдете решения хранения данных/параметров во время перехода страницы, просто выполните поиск раздел: Обработка данных/параметров между переходами страниц) перед изменением страницы. В этом случае, когда мы вернемся к предыдущей странице, мы могли бы использовать pagebefpreshow событие для беспроблемного прокрутки до нижней части страницы.

//scroll to Y 100px
$.mobile.silentScroll(100);

И вот рабочий пример молчащего свитка: http://jsfiddle.net/Gajotres/5zZzz/

Подробнее

Если вы хотите узнать больше об этой теме, посмотрите на эту статью, вы также будете найти рабочие примеры.

Ответ 2

Я смог исправить это (для iOS) следующим образом:

• Добавьте дополнительный контейнер div для прокручиваемой части. Обычно окружает прокручиваемую часть вашей страницы. В моем случае сразу после заголовка и перед нижним колонтитулом.

• Добавьте следующий CSS:

  .extracontainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  

Некоторые из CSS могут быть дополнительными, но в моем случае это было, чтобы избежать проблем с некоторыми другими стилями, которые у меня есть отрицательные поля, paddings и т.д.

Также убедитесь, что для прокрутки прокрутки -webkit-overflow-scroll: touch;.

Надеюсь, это поможет.

Ответ 3

  $( document ).on( "mobileinit", function() {
        var silentScroll = $.mobile.silentScroll;
          $.mobile.silentScroll = function( ypos ) {
        if ( $.type( ypos ) !== "number" ) {
            // FIX : prevent auto scroll to top after page load
            return;
        } else {
            silentScroll.apply(this, arguments);
        }
    }
  }

Ответ 4

Для JQuery Mobile 1.4.5 я исправил это, изменив эту строку в jquery.mobile-1.4.5.min.js:

a.mobile.hideUrlBar & g.load(a.mobile.silentScroll)

:

a.mobile.hideUrlBar

Ответ 5

попробуйте использовать scrollstart для обнаружения события прокрутки окна в jQuery mobile, если вам нужно:)