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

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

Эта проблема возникла в jQM 1.2 и до сих пор не устранена во вновь выпущенной версии 1.3.

Кто-нибудь знает, как предотвратить прокрутку наверх, и помнить положение прокрутки при использовании кнопки назад?

Это раздражающее поведение недопустимо и нарушает весь процесс работы приложения.

Я использую его как веб-приложение на iPhone 4S с iOS 6.1.2.

Источник

6 ответов

Решение

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

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

Есть 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% высоты страницы, независимо от того, как далеко прокручивается просмотр списка. Это также причина, по которой при возврате список будет оставаться на той же позиции.

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

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

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

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

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

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

И вот рабочий пример тихой прокрутки: http://jsfiddle.net/Gajotres/5zZzz/

Больше информации

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

Источник

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

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

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

    .extracontainer {
  ширина: 100%;
  высота: 100%;
  положение: абсолютное;
  верх: 0;
  справа: 0;
  низ: 0;
  слева: 0;
  поле: 0;
  отступы: 0;
  переполнение: авто;
  переполнение-у: прокрутка;
  -webkit-overflow-scrolling: сенсорный;
}

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

Также убедитесь, что у вас есть -webkit-overflow-scrolling: touch; иметь плавную прокрутку.

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

Источник

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

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

к этому:

a.mobile.hideUrlBar

Источник

Решение для предотвращения скрула наверх:

body onload = "$. mobile.silentScroll (window.scrollY);"

Источник 
  $( 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);
        }
    }
  }
Источник

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

Источник
Другие вопросы по тегам