javascript - iscroll做的轮播图在移动端没办法上下滑动

问题描述

问 题

在一个项目用iscroll 4.1.9版做了一个轮播图，

现在客户要求在轮播图上滑动，整个页面能被滑动，

我百度了好久，找了一些方法，都没用，请你们帮我看看，哪儿有问题。

我找到的方法有

---

1、 lockDirection=false---无效

---

2、
（
1.去除onBeforeScrollStart里的阻止默认行为
onBeforeScrollStart: function (e) { //e.preventDefault(); }

1. onBeforeScrollMove设置为

2. (e) {e.preventDefault();}

以保证手机上的正常滑动免受浏览器默认行为影响（如下滑时会有窗口的scroll事件），当然如果这里不添加的话也可以在document的END_EV中阻止浏览器默认行为

1. _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屋！