Ищете альтернативу для iScroll (Scrolling Div's на iOS / Webkit) - PullRequest
8 голосов
/ 01 июля 2011

Я создал мобильное приложение сложных форм поверх данных и сейчас ищу решение, позволяющее сохранить положение заголовка и строки нижнего колонтитула. В моем макете, который был разработан и протестирован с Chrome и Safari на моем рабочем столе, я просто разместил верхний и нижний колонтитулы, а также раздел содержимого, высота которого задается JavaScript в событии resize окон.

Это неправильный способ для мобильного мира, потому что переполнение: авто не поддерживается в мобильном WebKit.

Я попробовал кое-что сам и взглянул на iScroll. На самом деле, на моем iPad iScroll разбил сафари, а приложение без этого компонента работает довольно гладко. У меня есть много относительно сложных форм, которые могут быть проблемой для iScroll, которые, я думаю, невозможно выиграть.

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

Есть предложения?

Спасибо!

Ответы [ 3 ]

14 голосов
/ 04 июля 2011

Итак, есть три обычно упоминаемых решения:

  1. iScroll
  2. YUI ScrollView
  3. Scrollability

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

Я просто решил сдаться и подождать год - Apple недавно объявила о своей поддержке позиции: фиксированная и переполнение: прокрутка, которая произведет революцию в этой части и решит все проблемы такого рода, которые у нас сегодня есть.

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

Я не думаю, что jScrollPane был разработан для использования его на мобильных устройствах, но он также был оптимизирован для этой цели. Он работает только на моем iPad, Android 2.3, а также на последней версии Opera Mobile.

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

Очень хорошо.

11 голосов
/ 10 августа 2012

Мобильный веб-набор теперь поддерживает прокрутку с использованием только CSS.Создайте класс «прокручиваемый» и добавьте следующие правила:

    .scrollable {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

Добавьте свой класс «прокручиваемый» к любому элементу блока, требующему прокрутки.Только Webkit.

1 голос
/ 18 декабря 2012

https://github.com/filamentgroup/Overthrow/

Легкое решение на основе полифилла, которое позволяет современным браузерам с переполнением: поддержка прокрутки делает свое дело.

Все еще находится на ранней стадии разработки, но работает довольно хорошо на самой большой затронутой пользовательской базе (Android 2.2 / 2.3 / iOS <5). </p>

...