Прокрутка одним пальцем внутреннего содержимого (div / iframes) в iPhone Mobile Safari

#iphone #mobile #safari #css-position #css

#iPhone #Мобильный #safari #css-position #css

Вопрос:

Дополнение: веб-приложение iPhone mobile safari

Мне нужно, чтобы некоторые части веб-страницы были видны, даже когда пользователь прокручивает. CSS-свойство position: fixed работает не так, как ожидалось. Использование свойства overflow: auto для включения или необходимости прокрутки двумя пальцами, чего я не хочу.

Есть ли какой-либо способ обеспечить прокрутку одним пальцем внутреннего содержимого ‘div’ или ‘iframes’ с помощью javascript или iphone safari Touch API (событие touchMove)?

Ответ №1:

В CSS (для iOS 5):

 -webkit-overflow-scrolling: touch;
  

Комментарии:

1. К какому элементу это необходимо применить?

2. В контейнере (том, в котором было бы что-то вроде overflow:auto; или что-то подобное). Кстати, это великолепно, спасибо! 🙂

Ответ №2:

Изначально это невозможно ни с div, ни с iframe, поэтому это должно быть решено с помощью javascript, прослушивающего события касания. Я исследую эту же проблему для проекта, и на данный момент я нашел пару библиотек javascript, которые решают эту проблему.

В данный момент я изучаю это, но еще не приступил к этому.

http://cubiq.org/iscroll-4

Джо Хьюитт из Three20 fame недавно приступил к разработке решения и для этого, но он действительно на ранней стадии разработки, тогда как другой существует уже пару лет.

http://joehewitt.github.com/scrollability/

Комментарии:

1. Привет, scottbates22, спасибо. Я также смотрю на iScroll-4

2. В дальнейшем… Я обнаружил, что производительность iscroll на телефонах Android составляет

3. или не прокручивать, вот в чем вопрос. Что благороднее — страдать от завитушек и стрелок возмутительной разметки или вооружиться против разработчиков Борьбы и, внедрив, положить им конец: умереть, прокручивать…

Ответ №3:

Вы можете использовать только один палец, но вы должны обеспечить стиль.высота внутреннего DIV

 <div id="container-div" style="overflow:hidden">
   <div id="inner-div" style="overflow-y:auto; height:1024px"> 
   <!-- IMPORTANT!! you must specify the height of the inner div to make it scrollable -->
  

Комментарии:

1. Мы можем видеть полосу прокрутки, но фактическое содержимое не прокручивается.