Arhn - архитектура программирования

Можно ли установить scrollTop на странице перед отображением страницы на мобильном устройстве?

У меня нет кода для этого, так как это скорее концептуальный вопрос.

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

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

Есть ли способ установить scrollTop на jquery mobile, чтобы он выполнялся до отображения страницы, предпочтительно примерно во время события pagebeforeshow? Насколько я знаю, это событие вызывается после инициализации всех мобильных виджетов jquery, поэтому нельзя ли в это время установить scrollTop в окне?

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

Я не смог правильно настроить его сам, мне интересно, возможно ли это событие.

Вот краткое изображение установки, которую я пытаюсь воссоздать. Зеленый квадрат — это раздел, который я хочу «скрыть», над окном. Синее поле представляет собой мобильное окно, а серое поле представляет документ.

введите здесь описание изображения

РЕДАКТИРОВАТЬ: я проверил мобильные браузеры; в сафари нет прыжков/дрожания, когда он корректирует молчание прокрутки. Chrome mobile на IOS имеет скачок/дрожание, интересно, вопрос ли это в производительности браузера или в том, как он ставит в очередь изменения DOM/viewport...

mobile jquery jquery-mobile
05.09.2013

  • Нет, я не думаю, что это возможно. Вы можете скрыть свой html , установить прокрутку и снова показать свой html. 05.09.2013
  • Vimeo оказывает этот эффект на видеостраницы, чтобы показать больше видео этого создателя. Возможно, стоит изучить, как они это делают. 05.09.2013
  • Vimeo для настольных компьютеров — да, но на мобильных устройствах такой функции нет. 05.09.2013
  • @Prussprus У меня Nexus 7 Android 4.3 в Chrome, и он у меня работает нормально. Что для вас значит мобильность? 06.09.2013
  • Я проверял CrIOS и Safari Mobile. Признаюсь, я не совсем разобрался с используемым телефоном, но сам еще не пробовал его на Android. Он отлично работал в Safari на моем IOS, но не в Chrome. 06.09.2013

Ответы:


1

ДЕМО: http://jsfiddle.net/gnsj6/

CSS:

.top {
    height: 200px;
    margin-top: -200px;
}

.container { 
    height: 1000px; 
}

jQuery:

$('html, body').animate({
    scrollTop: $("#topedge").offset().top + 200
}, 0, function() {

    $(".top").css("margin-top","0px");

});

Я не могу заметить никакого скачка с этим решением. Ни с довольно большими данными (http://jsfiddle.net/gnsj6/4/),

05.09.2013
  • Это все равно заставило бы его прыгать 05.09.2013
  • исправлено, теперь не должно прыгать 05.09.2013
  • Да, верно, но это вызывает другую проблему. После того, как вы установите файл scrolltop. Вся страница будет анимирована 200px вниз. 05.09.2013
  • если вы сделаете прокрутку страницы с некоторой скоростью, две анимации будут с одинаковой скоростью, и вы ничего не заметите. 05.09.2013
  • ОП не хочет прокручиваться. OP хочет прокрутить страницу до определенного смещения (без анимации). 05.09.2013
  • Мое колебание с этим ответом заключалось в том, что он не использовал специфические методы jquery mobile, но кажется, что прокрутка с использованием анимации решает проблему перехода. Большое спасибо за Вашу помощь! 05.09.2013
  • Пожалуйста, честно, мне интересно, как это может работать .. но это работает, так что все в порядке! 05.09.2013
  • интересно, хороший ответ :) 05.09.2013

    • 2

    Добавьте класс, который скрывает страницу, после того, как вы установите верхнюю часть прокрутки, удалите класс.

    05.09.2013

    3

    Я бы сказал что-то вроде этого. Скройте свой body (с visibility, иначе вы не сможете прокрутить):

    ....
<body style="visibility:hidden;">....

    И сделайте это с помощью jQuery:

    $(function(){
    $('body').scrollTop('200px').css('visibility','');

});
    05.09.2013
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..