Прокручиваемый div на iPhone без использования 2 пальцев?

Question

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

Я знаю, что я мог бы сделать это, используя верхний / нижний колонтитулы, которые являются элементами управления UIView, но я хочу, чтобы верхний и нижний колонтитулы были HTML-тегами div, поскольку чистое решение HTML / JS / CSS будет проще переносить на Android / PalmPre / AdobeAir, который скоро появится в моем списке задач.

Я могу сделать это, используя методы, подобные упомянутой здесь:

http://defunc.com/blog/?p=94

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

Любые предложения о том, как это сделать?

Спасибо

Бред

Answer 1

Я нашел кого-то, кто реализовал для этого многоразовое решение с заголовком и нижним колонтитулом:

http://cubiq.org/iscroll-4

Answer 2

Это то, что вы ищете? Откройте эту ссылку на вашем iPhone устройстве или симуляторе .

Файл index.html содержит три элемента div для заголовка, контейнера и нижнего колонтитула непосредственно под телом, а вся работа выполняется в файле fixed.js. Документ фиксируется на месте путем отмены обычного действия для события «touchmove»:

    // Disable flick events
    disableScrollOnBody : function() {
        document.body.addEventListener("touchmove", function(e) {
            e.preventDefault();
        }, false);
    },

Затем большая часть работы направлена ​​на создание прослушивателей событий для событий "touchstart", "touchmove" и "touchend", которые присоединяются к div "content" в разделе "container". Логика сводится к простому перемещению «содержимого» div вверх и вниз.

Это решение на 100% HTML / CSS / JavaScript, однако есть некоторые проприетарные WebKit CSS и JavaScript, которые могут ограничивать переносимость. Для работы на другом мобильном устройстве может потребоваться небольшая настройка, но это было бы хорошим доказательством концепции для начала.

Я не создавал этот удивительный пример проекта, я просто довожу его до сведения сообщества. Для получения дополнительной информации и ссылки на сжатый проект, прочитайте весь пост Ричарда "Доктип" Эррары о Исправлено позиционирование в Mobile Safari .

Answer 3

Я не слишком знаком с UIWebView, так что это может быть совершенно глупым предложением. Но что-то мешает вам иметь три UIWebViews на странице? Один для заголовка, один для тела и один для нижнего колонтитула. Потому что разбивать это звучит как правильная идея.

Answer 4

Может быть неуклюжим, но вы можете переместить верхний и нижний колонтитулы поверх div, когда пользователь прокручивает. Таким образом, ваш основной div не должен быть прокручиваемым. Не помогает ни для чего (пока) использование фреймов.

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

Answer 5

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">

Добавьте их в свой HTML-код, это может решить вашу проблему.

Answer 6

Я реализовал iScroll на iphone, и он действительно плавный и быстрый, и вы можете делать все, что захотите. Недостатки в том, что Android (1.6) отказывается прокручивать, как я хотел, и иногда блокирует другой javascript, если таковые имеются.

Answer 7

Для справки только по CSS Справочник по Safari CSS , вероятно, содержит то, что вы ищете. Вы будете особенно заинтересованы во всем, что начинается с «-webkit» или «-khtml», поскольку это расширенные свойства, доступные только в WebKit, такие как 3D и касания. Должно быть применимо и к Android.

С JavaScript Введение в разделы программирования WebKit DOM и Справочник по API WebKit DOM - это руководства по переходу. Обязательно взгляните на демо-таблицу для некоторого копирования и вставки javascript при обработке ваших прикосновений, поскольку именно так я бы решил это.