手机端局部滚动问题 overflow-y:auto|scroll
2019-08-29 本文已影响0人
白小纯Zzz
var myScroll;
function loadedscr() {
setTimeout(function () {
// 各种参数可以查看相关文档
// IScroll默认隐藏了其所包含元素的click/tap事件,所以默认情况下,不管用户不管怎么操作,
//都不能触 发IScroll中元素的click/tap事件,
//解决方案:在初始化IScroll时,对IScroll进行配置click: true, tap: true
myScroll = new IScroll('#myscroller_rapper', {
mouseWheel: true,
scrollY: true,
scrollbars:true,
freeScroll: true,
click: true,
tap: true
});
});
}
// 防止页面未加载完成,导致取不到高宽值
window.addEventListener('load', loadedscr, false);
/* // 如果是图片可能需要图片加载完成才能获取到高宽值
document.getElementById('imgid').onload = loadedscr;
// 取消事件的默认动作,如果需要的话
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
*/
需要注意的是:假如是纵向滚动:<div id="myscroller_rapper" style="overflow-y:auto;height:540px;-webkit-overflow-scrolling: touch;"></div>滚动框元素必须有高度,默认滚动的是它的第一个子元素(也需要能计算出高度,图片需要加载完成才能计算高宽),多个子元素可以使用<div></div>进行包裹且必须给定高度
IScroll默认隐藏了其所包含元素的click/tap事件,所以默认情况下,不管用户不管怎么操作,都不能触发IScroll中元素的click/tap事件,解决方案:在初始化IScroll时,对IScroll进行配置click: true, tap: true