javascript - iscroll做的轮播图在移动端没办法上下滑动
问题描述
在一个项目用iscroll 4.1.9版做了一个轮播图,
现在客户要求在轮播图上滑动,整个页面能被滑动,
我百度了好久,找了一些方法,都没用,请你们帮我看看,哪儿有问题。
我找到的方法有
1、 lockDirection=false---无效
2、
(
1.去除onBeforeScrollStart里的阻止默认行为
onBeforeScrollStart: function (e) { //e.preventDefault(); }
onBeforeScrollMove设置为
(e) {e.preventDefault();}
以保证手机上的正常滑动免受浏览器默认行为影响(如下滑时会有窗口的scroll事件),当然如果这里不添加的话也可以在document的END_EV中阻止浏览器默认行为
_end 中将模拟事件名更改为END_EV或者直接去掉模拟事件的功能
iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js编写,不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题,兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。最新版本为iscroll4。
)---无效
3、(
1:在onBeforeScrollStart: function (e) { e.preventDefault(); }, 修改为onBeforeScrollStart: null,
2:在_move方法里增加(大小可根据需要自行修改)
if(newY>=-10 && newY<=10){e.preventDefault();}
3.lockDirection 设置为true(正常默认就是为true,可不用修改)
注意点:要注意在自己的脚本里面没有对全局的移动事件进行阻止默认事件,如
document.addEventListener('touchmove', function (e) {
//
// //取消事件的默认动作
// e.preventDefault();
//
// }, false);
如果在外层有这个事件,那你插件里面怎么改可能都没用。(本人就吃过亏)
)---无效
项目轮播图代码如下:
//轮播
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function() {
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX + 1) + ')').className = 'active';
}
});
}
document.addEventListener('DOMContentLoaded', loaded, false);
function setScrollerTopValue(){
sessionStorage.setItem("scrollTop", $('.div_body').scrollTop());
}
function removeSessionStorage(){
if(sessionStorage.length>0){
for(var key in sessionStorage){
sessionStorage.removeItem(key);
}
}
}
经过测试,第3个方法对有的型号机子有效。
而我用的是华为p8,为无效机型,
用同事的三星机试,有效。
没办法对所有型号测试,所以我也只能说对个别型号有效。
希望你们有更好的方法
这篇关于javascript - iscroll做的轮播图在移动端没办法上下滑动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!