I am using iScroll4 and it's working great!
This are the functions I use to init, refresh and end 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;
}
The problem is it won't let <a>
or <input>
or anything to be clicked (or focused, I am not sure); also css :hover or :focus won't be applied; but it would fire events in javascript like
.hover() or .click()
Any idea how to solve this if possible?
You just need to make this changes in the loader of the iscroll:
Change this line:
myScroll = new iScroll('wrapper');
For this:
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();
}
});