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

StackOverflow https://stackoverflow.com/questions/615357

  •  03-07-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

Есть какие-нибудь предложения о том, как это сделать?

Спасибо,

Брэд

Это было полезно?

Решение

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

http://cubiq.org/iscroll-4

Другие советы

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

Это то, что ты ищешь? Откройте эту ссылку на вашем устройстве 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" в разделе "контейнер".Логика сводится к простому перемещению div "content" вверх и вниз.

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

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

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

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

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

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

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

<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-код может решить вашу проблему.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top