iScroll не позволяет нажимать элементы - PullRequest
17 голосов
/ 01 декабря 2011

Я использую iScroll4 , и он отлично работает!

Это функции, которые я использую для инициализации, обновления и завершения iScroll:

function iniciarIscroll(){
    /*En ie7 no lo usamos*/
    if(!ie7){
        $(document).ready(function() {
            myScroll1 = new iScroll('nvl1');
            myScroll2 =new iScroll('nvl2');
            /*document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 200), false);*/
        });
    }
    return false;
}

function refrescarIscroll(){
    if(!ie7){
        myScroll1.refresh();
        myScroll2.refresh();
    }
    return false;
}


function terminarIscroll(){
    if(!ie7){
        myScroll1.destroy();
        myScroll1 = null;
        myScroll2.destroy();
        myScroll2 = null;
    }
    return false;
}

Проблема в том, что он не позволит <a> или <input> или чему-либо щелкнуть (или сосредоточиться, я не уверен); также css: hover или: focus не будет применен; но это будет запускать события в JavaScript, как

.hover() or .click()

Есть идеи, как решить эту проблему, если это возможно?

Ответы [ 9 ]

19 голосов
/ 19 октября 2012

Вам просто нужно внести эти изменения в загрузчик iscroll:

Изменить эту строку:

myScroll = new iScroll('wrapper');

Для этого:

myScroll = new iScroll('wrapper', {
useTransform: true,
zoom: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
12 голосов
/ 30 мая 2013
  // Setup myScroll
  myScroll = new IScroll('#wrapper', {
    scrollX: horizontalSwipe,
    scrollY: !horizontalSwipe,
    momentum: false,
    snap: document.querySelectorAll('#scroller .slide'),
    snapSpeed: 400,
    bounceEasing: 'back',
    keyBindings: true,
    click: true
  });

Для меня мне просто нужно добавить click: true в последней строке ... Потратил целый день на отладку и реализацию всех предложенных решений безрезультатно ...

10 голосов
/ 05 декабря 2011

Автор прокомментировал, что совместимость форм затруднена - это известная проблема, и он работает над исправлением для следующей версии.Кто-то еще прокомментировал на форумах:

Начиная с версии 4.1.9, поддержка полей формы все еще находится в стадии разработки.Вы можете заставить переключатели и флажки работать, оборачивая метку (возможно, обертывание работает лучше, чем использование синтаксиса for = "").

Ссылки должны быть в порядке и работать в предоставленных демонстрациях.Вы закомментировали вызов e.preventDefault() в вашем скрипте инициализации, который является обычным виновником.Может быть, проблема совместимости форм также влияет на ссылки?

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

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

2 голосов
/ 10 декабря 2011

Когда я впервые обнаружил iScroll, я подумал, что это решение многих моих проблем. Тогда эта проблема укусила меня. Пытаясь найти обходной путь, я предложил этот запрос на извлечение .

В запросе на удаление есть примечание, что было найдено другое, лучшее решение, хотя я не уверен, какой запрос на выборку должен был / должен был решить проблему. Я посмотрю, смогу ли я получить более подробную информацию от автора этой заметки.

Обновление: соответствующий запрос на поиск можно найти здесь . У меня еще не было возможности протестировать его (надеюсь, сегодня я подтвердлю поддержку Android).

2 голосов
/ 06 декабря 2011

Одна из работ, которую я использовал, это «заморозка» iscroll, когда я хочу, чтобы пользователь мог вносить изменения. Несовместимость, которую iScroll имеет с входными данными, связана, насколько я могу судить, с преобразованиями css в сочетании с поддержкой касания, которая применяется к содержимому в скроллере. Если вы временно отключите скроллер, вы сможете разрешить пользователю вводить значения. Хитрость заключается в том, чтобы убедиться, что текущее местоположение прокрутки содержимого сохраняется при отключении. Когда «заморожен», пользователь может обновить входные данные в видимой области. Недостатком является то, что скроллер не будет прокручиваться в этом состоянии. Вам придется разморозить его на каком-нибудь мероприятии.

Я добавил эти функции в iScroll.prototype, чтобы эта работа работала:

_get_current_scroll_px: function (transformStyle) {
    //return the first string that looks like an integer, that should be the x translation
    return /[\-0-9]+px/.exec(transformStyle)[0];
},


freeze: function () {
    this.disable();
    this.savedStyle = this.scroller.style[vendor + 'Transform'];
    this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller
    this.scroller.style[vendor + 'Transform'] = '';
},

thaw: function () {
    this.scroller.style[vendor + 'Transform'] = this.savedStyle;
    this.scroller.style['marginLeft'] = '0';
    this.enable();
}

Вызов или заморозка это будет выглядеть так:

//user triggered event causes freeze
yourFreezeEventCallback: function () { 
    myScroll1.freeze();
    //now user can use visible inputs on screen
}

Оттепель это будет выглядеть так:

//user triggered event causes thaw
yourThawEventCallback: function () { 
    myScroll1.thaw();
    //now scrolling is back and inputs can no longer be edited or in focus
}

Очевидно, вам нужно каким-то образом интегрировать это в ваш собственный проект, но это сработало для меня. Это не идеально, поэтому я с нетерпением жду обновления iScroll. Предупреждение: это не проверено в IE, поэтому я не буду ручаться за это там. Я надеюсь, что это, по крайней мере, начало, чтобы помочь вам обойти это.

0 голосов
/ 02 сентября 2016

Попробуйте это

myScroll = new IScroll('#wrapper', { click: true });
0 голосов
/ 26 июля 2014

комментарий

position:absolute;

при #pageWrapper в styles.css

В моем случае это решило вышеуказанную проблему, не подлежащую щелчку.

0 голосов
/ 29 октября 2013

Ошибка браузера Android - результат очень старой версии WebKit внутри Android, даже внутри Android 4.3. Основная причина ошибки - неправильная обработка события click, которое iScroll отправляет обратно в браузер (удаление предотвращение дефолта просто прекращает отправку этого события click) Браузер Android Chrome свободен от этой ошибки, поскольку он обновил библиотеку WebKit внутри.

Ожидание обновления Android WebKit от Google.

0 голосов
/ 10 декабря 2011

Я также работал над тем, чтобы в мобильной среде все происходило гладко, и iscroll была одной из библиотек, которую я искал при поиске подходящего инструмента.В других ответах предлагалось решить вашу конкретную проблему, но на самом деле я бы предложил использовать scrollability (от Joe Hewitt) или touchscroll (от David Aurelio).Я думаю, что прокручиваемость на самом деле предлагает лучшее ощущение, но на самом деле это не так, и вы в конечном итоге столкнетесь с такими же или похожими проблемами.Я лично использую сенсорную прокрутку для своего проекта, и я рекомендую его.

Мне пришлось добавить пользовательские действия по щелчку и проверку тайм-аута, когда я экспериментировал с iscroll несколько недель назад в своем проекте, и я сделал это с помощьюкомментируя e.preventDefault () в начале касания и вставляя некоторые из моих собственных функций, чтобы ловить, когда он фактически прокручивается.В своей основе все эти библиотеки работают одинаково (перехват событий и их предотвращение, запуск преобразований css для более плавной анимации, чем перерисовка DOM, а затем искусственное создание любых событий, которые должны быть запущены).Это означает, что другой способ исправить это - найти, когда должно произойти событие click для ваших конкретных элементов, и запустить его вручную в коде.В сенсорной прокрутке он прослушивает события на самом верхнем элементе, поэтому вы можете перезаписать поведение, просто остановив всплывающее окно ... Я не могу вспомнить, делает ли iscroll то же самое.

Это (плавное, естественное чувство, анимация в мобильном телефоне)все еще остается областью, которая находится на грани различных технологий, поэтому ни у кого еще нет полного решения.Я ожидаю, что через несколько лет мобильность улучшится, так что мобильные браузеры в любом случае будут просто обрабатывать события прокрутки, но до тех пор мы вынуждены взламывать подобные решения.Удачи!

...