Как я могу реализовать прокручиваемый <div>на iPad?

Question

У меня есть страница, на которой используется прокрутка <div>:

<DIV style="OVERFLOW-Y: hidden; WIDTH: 928px; OVERFLOW: scroll">
...Huge Content
</div>

Теперь, когда она хорошо работает в настольных браузерах, я не могу прокручивать на iPad.

Не могли бы выпожалуйста, предоставьте решение (желательно без использования каких-либо сторонних фреймворков, таких как Sencha и т. д.)?

Answer 1

С iPhone и iPad вы можете прокручивать отдельные элементы, помещая на них два пальца и перетаскивая их.

• http://support.apple.com/kb/ht1484
• http://wyattlecadre.wordpress.com/2010/11/20/ios-quick-tip-two-finger-scrolling/

_{... что на самом деле делает этот вопрос менее важным для программирования: -)}

Answer 2

Я понимаю, что это старый вопрос, но теперь есть гораздо лучшее решение.Теперь у нас есть доступ к элементу -webkit-overflow-scrolling: touch; css.Смотрите здесь для демонстрации

Answer 3

Я успешно справился с этой проблемой с помощью этого небольшого проекта: http://cubiq.org/iscroll.

Прокрутите вниз до "как пользоваться".

РЕДАКТИРОВАТЬ , попробуйте это только для горизонтальной прокрутки (с помощью iScroll):

HTML :

<div id="wrapper">
    <div id="scroller">
        Huge Content...
    </div>
</div>

CSS

#wrapper {
    position:relative;
    z-index:1;
    width: 926px
    height: 200px;
    overflow: hidden;
}

JavaScript

function loaded() {
    document.addEventListener('touchmove', function(e){ e.preventDefault(); });
    myScroll = new iScroll('scroller', {vScrollbar:false});
}

document.addEventListener('DOMContentLoaded', loaded);

Answer 4

Нет простого, родного способа сделать прокрутку div одним пальцем, как если бы это была полноэкранная панель. Вы можете использовать два пальца, как говорит Энди Э., но я сомневаюсь, что большинство пользователей узнают об этом, и это не очень заметно ИМО.

Сенча и т. Д. Может сделать это, однако это не реальная (т.е. нативная) прокрутка, она использует все виды хитрости Javascript для аппроксимации, и может замедляться и вести себя плохо, если вы делаете что-нибудь еще сложное ...

Тем не менее, веб-приложения, такие как Yahoo Mail на iPad, похоже, делают это довольно элегантно.