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

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

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

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

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

Ответы

Ответ 1

У меня был хороший успех с этой проблемой с помощью этого небольшого проекта: 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);

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

Тем не менее, веб-приложения, такие как Yahoo Mail на iPad, кажутся очень элегантными.