Как прокрутить элемент страницы в jQuery Mobile?

Question

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

Пока что я попробовал несколько вещей, наиболее успешным из которых было:

jQuery(document).bind("mobileinit", function() {
  var target;
  // if there's an element with id 'current_user'
  if ($("#current_user").length > 0) {
    // find this element's offset position
    target = $("#current_user").get(0).offsetTop;
    // scroll the page to that position
    return $.mobile.silentScroll(target);
  }
});

Это работает, но тогда позиция страницы сбрасывается, когда DOM полностью загружен. Кто-нибудь может предложить лучший подход?

Спасибо

Answer 1

Немного поздно, но я думаю, что у меня есть надежное решение без необходимости setTimeout(). После быстрого просмотра кода кажется, что JQM 1.2.0 выдает silentScroll(0) на window.load для просмотра без хрома на iOS. См. jquery.mobile-1.2.0.js, строка 9145:

    // window load event
    // hide iOS browser chrome on load
    $window.load( $.mobile.silentScroll );

Что происходит, так это то, что это противоречит аппликативным вызовам silentScroll(). Вызывается слишком рано, рамки прокручиваются обратно вверх. Вызывается слишком поздно, пользовательский интерфейс мигает.

Решение состоит в том, чтобы привязать обработчик одноразового действия к событию 'silentscroll', которое вызывает window.scrollTo() напрямую (silentScroll() в любом случае немного больше, чем асинхронный window.scrollTo()). Таким образом, мы фиксируем первый выданный JQM silentScroll(0) и сразу же перемещаемся к нашей позиции.

Например, вот код, который я использую для глубокой связи с именованными элементами (обязательно отключите загрузку ajax для входящих ссылок с помощью data-ajax="false"). Известны имена якорей #unread и #p<ID>. Заголовок исправлен и использует #header ID.

$(document).bind('pageshow',function(e) {
    var $anchor;
    console.log("location.hash="+location.hash);
    if (location.hash == "#unread" || location.hash.substr(0,2) == "#p") {
        // Use anchor name as ID for the element to scroll to.
        $anchor = $(location.hash);
    }
    if ($anchor) {
        // Get y pos of anchor element.
        var pos = $anchor.offset().top;

        // Our header is fixed so offset pos by height.
        pos -= $('#header').outerHeight();

        // Don't use silentScroll() as it interferes with the automatic 
        // silentScroll(0) call done by JQM on page load. Instead, register
        // a one-shot 'silentscroll' handler that performs a plain
        // window.scrollTo() afterward.
        $(document).bind('silentscroll',function(e,data) {
            $(this).unbind(e);
            window.scrollTo(0, pos);
        });
    }
});

Пользовательский интерфейс больше не мигает, и кажется, что он работает надежно.

Answer 2

Событие, которое вы ищете, - "просмотр страницы".

Answer 3

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

В настоящее время кажется, что нет решения (по крайней мере для меня).

Я пробовал разные события (mobileinit, pageshow) и разные функции (silentscroll, scrolltop), как было предложено выше, но в результате я всегда прокручивал страницу до тех пор, пока все изображения и html не закончили загрузку, когда страница снова прокручивалась вверх!

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

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

Надеюсь, кто-то найдет более разумное и эффективное решение, чем это.