Подтвердить что ты не робот

IScroll не позволит щелчкам элементов

Я использую 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()

Любая идея, как решить это, если это возможно?

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

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

Ответ 2

Вам просто нужно внести эти изменения в загрузчик 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();
}
});

Ответ 3

  // 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 в последней строке... Провел весь день отладки и реализации всех предлагаемых решений безрезультатно...

Ответ 4

Одна работа, которую я использовал, - это "заморозить" 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, поэтому я не буду ручаться за него. Надеюсь, это по крайней мере начало, чтобы помочь вам разобраться.

Ответ 5

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

комментарий

position:absolute;

at #pageWrapper в styles.css

В моем случае это решило вышеупомянутую непривлекательную проблему.

Ответ 9

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

myScroll = new IScroll('#wrapper', { click: true });