На самом деле все, что вам нужно для решения этой проблемы на устройствах iOS (iPad, iPhone и т. Д.), Это добавить в свой CSS следующее:
#container {
position:fixed;
top:120px;
bottom:0px;
overflow:auto;
}
В этом примере предполагается, что:
- часть, которую вы хотите прокрутить, начинается на 120px ниже вашего заголовка (т.е.
заголовок будет иметь высоту 120px)
- div, который вы хотите прокрутить, имеет id = 'container'
- вы будете использовать 2 пальца, чтобы прокрутить его. Если вы используете один палец, то
заголовок также переместится.
Это на самом деле довольно круто на iPad, так как дает пользователю выбор (переместить все это или оставить заголовок видимым, используя один или два пальца). Это также работает для нижних колонтитулов (измените нижнее значение).
Наконец, обратите внимание, что это для браузеров "Apple" (я успешно протестировал его на iPad и Mac Safari и Chrome), поэтому, если вы хотите поддерживать что-то еще, вам придется создавать разные коды, используя что-то вроде:
if (navigator.userAgent.match("Apple") == null) {
/* use a different container id */
}
Редактировать 7 октября 2011 г .: Спасибо chris-barr.com Я нашел это решение. Просто добавьте этот код:
<script>
function touchScroll(id){
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
</script>
<body onload="touchScroll('container')">
и он будет работать в iOS (iPhone, iPad) и Android только с одним пальцем !!!