iOS Введение в Objective-C: Прокрутка внутри страниц для мобильных устройств

Прокрутка внутри страниц для мобильных устройств немного осложнена.

Как известно не все современные мобильные браузеры поддерживают CSS свойство overflow со значением auto или scroll. А точнее поддерживает только браузер Blackbery и Firefox для мобильных устройств. iOs Safari поддерживает только при двухпальцевой прокрутке, а вот браузеры в Android совсем не поддерживают до версии 3, да и то не на всех устройствах

А ведь многие веб-разработчики и дизайнеры так полюбили эту замечательную фичу. Да и польза от нее на небольших (3.5-5 дюймов) экранах значительна.

Задавшись целью непременно порадовать заказчика тем, что его задумка с прокруткой будет воплощена в жизнь, я забрался с ногами в гугл и нашел кучу жалоб, что нет такой возможности. Но в конце концов, нашлась заветная ссылка на блог буржуйского соратника, задавшегося аналогичным вопросом много раньше меня. И пускай его решение не совсем относится к CSS, но меня оно вполне устроило.

Итак, чтобы overflow: auto можно было использовать для прокрутки страниц в мобильных устройствах нам понадобится сделать следующее:

Стандартный CSS для скролящегося DIV:

.scrollable {border: 1px black solid; overflow: auto; height: 200px;}

Сам DIV:

<div class="scrollable" id="scrollable">.......</div>

И две функции в JavaScript, которые будут выполнять всю грязную работу по прокрутке внутри страницы на мобильном устройстве:

Во-первых, функция для распознания тач-девайсов, таких как iPod, iPhone, iPad и Android телефонов и планшетов:

function isTouchDevice(){ 
    try{ 
        document.createEvent("TouchEvent"); 
        return true; 
    }catch(e){ 
        return false; 
    } 
}

И, наконец, сам код, позволяющий скролить содержимое DIV:

function touchScroll(id){ 
    if(isTouchDevice()){ //проверка на тач-девайс 
        var elt=document.getElementById(id); 
        var scrollStartPos=0; 
 
        elt.addEventListener("touchstart", function(event) { 
            scrollStartPos=this.scrollTop+event.touches[0].pageY; 
            event.preventDefault(); 
        },false); 
 
        elt.addEventListener("touchmove", function(event) { 
            this.scrollTop=scrollStartPos-event.touches[0].pageY; 
            event.preventDefault(); 
        },false); 
    } 
}

Далее добавляем обработчик для onload в тег BODY

<body onload="touchScroll('scrollable')">

или вызываем где-нибудь в конце страницы нашу функцию и наслаждаемся прокручиваемым содержимым нашего DIV:

touchScroll("scrollable");

Вот собственно и все, что касается обеспечения покрутки внутри страниц для мобильных устройств.

iOS Введение в Objective-C

четверг, 2 августа 2012 г.

Прокрутка внутри страниц для мобильных устройств

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

Отправить комментарий

четверг, 2 августа 2012 г.

Прокрутка внутри страниц для мобильных устройств

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

Отправить комментарий

четверг, 2 августа 2012 г.