У меня есть страница, которая использует прокручиваемую <div>:
<DIV style="OVERFLOW-Y: hidden; WIDTH: 928px; OVERFLOW: scroll">
...Huge Content
</div>
Теперь, когда он отлично работает в настольных браузерах, я не могу прокручивать iPad.
Не могли бы вы предоставить решение (желательно без использования каких-либо сторонних фреймворков, таких как Sencha и т.д.)?
У меня был хороший успех с этой проблемой с помощью этого небольшого проекта: 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);
С iPhone и iPad вы можете прокручивать отдельные элементы, помещая на них два пальца и перетаскивая их.
..., что делает это менее вопросом программирования: -)
Я понимаю, что это более старый вопрос, но теперь есть гораздо лучшее решение. Теперь у нас есть доступ к элементу -webkit-overflow-scrolling: touch; css. Смотрите здесь для демонстрации
Нет простого, родного способа сделать divs прокручиваемым одним пальцем, как если бы это была панель с полным экраном. Вы можете использовать два пальца, как говорит Энди Э, однако я сомневаюсь, узнает ли большинство пользователей об этом, и это не очень доступно для обнаружения ИМО.
Sencha и т.д. могут это сделать, однако это не настоящая (т.е. родная) прокрутка, она использует всевозможные трюки Javascript для ее приближения и может замедлить и вести себя плохо, если вы делаете что-то еще сложное...
Тем не менее, веб-приложения, такие как Yahoo Mail на iPad, кажутся очень элегантными.