прокрутка различных элементов (div style = "overflow-y: auto") на мобильных телефонах и планшетах - PullRequest
Новая
       7

прокрутка различных элементов (div style = "overflow-y: auto") на мобильных телефонах и планшетах

0 голосов
/ 12 сентября 2011

=]

Вот в чем дело:

Мы разрабатываем веб-приложение с использованием технологий HTML5 / CSS3 / JavaScript / jQuery.Когда я тестирую его в браузере моего настольного компьютера, все круто и полностью функционально.Это не проблема.=]

Но ... И вот проблема, в которой я застрял на данный момент ...

Когда я пытаюсь протестировать его на мобильном (или планшетном) устройстве div,не хочу прокручиватьЯ знаю, что мобильные устройства (и планшеты) обрабатывают события по-разному, они имеют (иногда несколько) разные события, получая

У нас не так много времени, чтобы покончить с этим (как обычно -_-), ноТем не менее, мы должны принести решение.Мы не хотим создавать другой пользовательский интерфейс для аппаратного обеспечения НЕ dekstop, поэтому я ищу решение, которое может быть запущено путем «сцепления» обработчиков мобильных событий с основными событиями.

Мы используемСвойства div и CSS overflow-x, overflow-y, которые необходимо прокручивать на мобильных (а также на планшетных) устройствах.Чтобы вы посоветовали?как бы ты это сделал?Какой был бы идеальный и эффективный по времени метод?

Заранее спасибо за ответ!=]

Лучший для всех, Бен

Ответы [ 4 ]

4 голосов
/ 18 ноября 2011

Спасибо за помощь, ребята, но я уже нашел способ сделать это. =) Я поделюсь этим с вами, чтобы вы знали.

Прежде всего, планшеты на Android 3.x имеют прокрутку div.

Но чтобы заставить его работать на 2.2 и ipad: Вот код, который я использовал (нажмите на меня!)

Таким образом, вы просто передаете id элемента div, который хотите прокрутить, для метода touchScroll () (после corse, в том числе на голове вашего html) и вуаля! =)

Я также расширил код (copy> paste code) с помощью другой функции, которая принимает элемент: 

function touchScrollElement(element){
    if(isTouchDevice()){
        var scrollStartPosY=0;
        var scrollStartPosX=0;

        element.addEventListener("touchstart", function(event) {
            scrollStartPosY=this.scrollTop+event.touches[0].pageY;
            scrollStartPosX=this.scrollLeft+event.touches[0].pageX;
        },false);

        element.addEventListener("touchmove", function(event) {
            if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
                this.scrollTop+event.touches[0].pageY < scrollStartPosY-5) ||
            (this.scrollTop != 0 && this.scrollTop+event.touches[0].pageY > scrollStartPosY+5))
                event.preventDefault();
            if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
                this.scrollLeft+event.touches[0].pageX < scrollStartPosX-5) ||
            (this.scrollLeft != 0 && this.scrollLeft+event.touches[0].pageX > scrollStartPosX+5))
                event.preventDefault();
            this.scrollTop=scrollStartPosY-event.touches[0].pageY;
            this.scrollLeft=scrollStartPosX-event.touches[0].pageX;
        },false);
    }
}

Так что это текущее решение ... =)

1 голос
/ 01 ноября 2011

iOS 5 поддерживает переполнение: прокрутка и переполнение: авто. Вам просто нужно добавить это правило CSS, и прокрутка должна работать: 

-webkit-overflow-scrolling: touch;
0 голосов
/ 13 сентября 2011

Мобильная реализация overflow: scroll ужасна ...

Вы можете использовать два пальца на устройстве iOS, но пользователи, как правило, не знают об этом, а до-Honeycomb операционные системы Android не имеют каких-либореализация для overflow: scroll и просто обрезать переполнение, как overflow: hidden.Даже реализация Honeycomb явно нестабильна и не очень удобна для пользователя.

Вы можете использовать один из нескольких готовых пакетов на основе JavaScript, которые пытаются реализовать кроссплатформенную прокрутку, но в целом они не соответствуют "звездному"пользовательский опыт. "

В jQuery Mobile есть эксперимент под названием" Scrollview " и iScroll, который приходит на ум .

- EDIT--

Я только что натолкнулся на библиотеку JavaScript с именем Wink, в которой есть хороший плагин с прокручиваемой областью. Wink Toolkit .

0 голосов
/ 12 сентября 2011

Когда я пытаюсь протестировать его на мобильном телефоне (или планшете), дивы не хотят прокручиваться.

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

(Если, с другой стороны, вы пытаетесь заставить их прокручивать через взаимодействие с пользователем, на iOS выможно прокручивать отдельные прокручиваемые элементы на странице, перетаскивая их двумя пальцами вместо одного.)

...