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()
Любая идея, как решить это, если это возможно?
Ответы
Ответ 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 });