Question

请帮助我找到一个对我之后很多其他人非常有用的解决方案。

我有一个用Bootstrapie制作的简单/标准旋转木马。当我需要向右或向左滑动时，问题开始转到Android中浏览器的轮播中的下一个或上一个选项卡。我知道这是提供这种功能Bootstrapping轮播的大量插件。我用最简单的方法使用组件＆＃34; touch＆＃34;来自jQuery Mobile。当我使用桌面浏览器（chrome，ff，opera）并使用鼠标向左/向右滑动时，一切正常（更换卡片）。但是，当我使用Android浏览器时，我没有这种可能性。我的诊断为什么会发生这种情况（不幸的是，这是如此独立于插件启用滑动，我失去了很多时间试图找到一个正在运行的插件 - 经过测试的hammer.js bootstrap-touch-carousel.js，slick.js，jquery.touchSwipe。 js等）。原因是我使用了来自plugin - manos.malihu的可配置滚动条＆＃39; a。我的诊断是在上面的插件中找到部分代码：jquery.Custom Scrollbar.js负责滑动（并阻止从jQuery Mobile滑动）。下面我在manos.malihu插件中粘贴负责滑动的代码：

/*
  TOUCH SWIPE EVENTS
  scrolls content via touch swipe
  Emulates the native touch-swipe scrolling with momentum found in iOS, Android and WP devices
  */
  _contentDraggable=function(){
     var $this=$(this),d=$this.data(pluginPfx),o=d.opt,
        namespace=pluginPfx+"_"+d.idx,
        mCustomScrollBox=$("#mCSB_"+d.idx),
        mCSB_container=$("#mCSB_"+d.idx+"_container"),
        mCSB_dragger=[$("#mCSB_"+d.idx+"_dragger_vertical"),$("#mCSB_"+d.idx+"_dragger_horizontal")],
        draggable,dragY,dragX,touchStartY,touchStartX,touchMoveY=[],touchMoveX=[],startTime,runningTime,endTime,distance,speed,amount,
        durA=0,durB,overwrite=o.axis==="yx" ? "none" : "all",touchIntent=[],touchDrag,docDrag,
        iframe=mCSB_container.find("iframe"),
        events=[
           "touchstart."+namespace+" pointerdown."+namespace+" MSPointerDown."+namespace, //start
           "touchmove."+namespace+" pointermove."+namespace+" MSPointerMove."+namespace, //move
           "touchend."+namespace+" pointerup."+namespace+" MSPointerUp."+namespace //end
        ],
        touchAction=document.body.style.touchAction!==undefined;
     mCSB_container.bind(events[0],function(e){
        _onTouchstart(e);
     }).bind(events[1],function(e){
        _onTouchmove(e);
     });
     mCustomScrollBox.bind(events[0],function(e){
        _onTouchstart2(e);
     }).bind(events[2],function(e){
        _onTouchend(e);
     });
     if(iframe.length){
        iframe.each(function(){
           $(this).load(function(){
              /* bind events on accessible iframes */
              if(_canAccessIFrame(this)){
                 $(this.contentDocument || this.contentWindow.document).bind(events[0],function(e){
                    _onTouchstart(e);
                    _onTouchstart2(e);
                 }).bind(events[1],function(e){
                    _onTouchmove(e);
                 }).bind(events[2],function(e){
                    _onTouchend(e);
                 });
              }
           });
        });
     }
     function _onTouchstart(e){
        if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){touchable=0; return;}
        touchable=1; touchDrag=0; docDrag=0; draggable=1;
        $this.removeClass("mCS_touch_action");
        var offset=mCSB_container.offset();
        dragY=_coordinates(e)[0]-offset.top;
        dragX=_coordinates(e)[1]-offset.left;
        touchIntent=[_coordinates(e)[0],_coordinates(e)[1]];
     }
     function _onTouchmove(e){
        if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){return;}
        if(!o.documentTouchScroll){e.preventDefault();}
        e.stopImmediatePropagation();
        if(docDrag && !touchDrag){return;}
        if(draggable){
           runningTime=_getTime();
           var offset=mCustomScrollBox.offset(),y=_coordinates(e)[0]-offset.top,x=_coordinates(e)[1]-offset.left,
              easing="mcsLinearOut";
           touchMoveY.push(y);
           touchMoveX.push(x);
           touchIntent[2]=Math.abs(_coordinates(e)[0]-touchIntent[0]); touchIntent[3]=Math.abs(_coordinates(e)[1]-touchIntent[1]);
           if(d.overflowed[0]){
              var limit=mCSB_dragger[0].parent().height()-mCSB_dragger[0].height(),
                 prevent=((dragY-y)>0 && (y-dragY)>-(limit*d.scrollRatio.y) && (touchIntent[3]*2<touchIntent[2] || o.axis==="yx"));
           }
           if(d.overflowed[1]){
              var limitX=mCSB_dragger[1].parent().width()-mCSB_dragger[1].width(),
                 preventX=((dragX-x)>0 && (x-dragX)>-(limitX*d.scrollRatio.x) && (touchIntent[2]*2<touchIntent[3] || o.axis==="yx"));
           }
           if(prevent || preventX){ /* prevent native document scrolling */
              if(!touchAction){e.preventDefault();}
              touchDrag=1;
           }else{
              docDrag=1;
              $this.addClass("mCS_touch_action");
           }
           if(touchAction){e.preventDefault();}
           amount=o.axis==="yx" ? [(dragY-y),(dragX-x)] : o.axis==="x" ? [null,(dragX-x)] : [(dragY-y),null];
           mCSB_container[0].idleTimer=250;
           if(d.overflowed[0]){_drag(amount[0],durA,easing,"y","all",true);}
           if(d.overflowed[1]){_drag(amount[1],durA,easing,"x",overwrite,true);}
        }
     }
     function _onTouchstart2(e){
        if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){touchable=0; return;}
        touchable=1;
        e.stopImmediatePropagation();
        _stop($this);
        startTime=_getTime();
        var offset=mCustomScrollBox.offset();
        touchStartY=_coordinates(e)[0]-offset.top;
        touchStartX=_coordinates(e)[1]-offset.left;
        touchMoveY=[]; touchMoveX=[];
     }
     function _onTouchend(e){
        if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){return;}
        draggable=0;
        e.stopImmediatePropagation();
        touchDrag=0; docDrag=0;
        endTime=_getTime();
        var offset=mCustomScrollBox.offset(),y=_coordinates(e)[0]-offset.top,x=_coordinates(e)[1]-offset.left;
        if((endTime-runningTime)>30){return;}
        speed=1000/(endTime-startTime);
        var easing="mcsEaseOut",slow=speed<2.5,
           diff=slow ? [touchMoveY[touchMoveY.length-2],touchMoveX[touchMoveX.length-2]] : [0,0];
        distance=slow ? [(y-diff[0]),(x-diff[1])] : [y-touchStartY,x-touchStartX];
        var absDistance=[Math.abs(distance[0]),Math.abs(distance[1])];
        speed=slow ? [Math.abs(distance[0]/4),Math.abs(distance[1]/4)] : [speed,speed];
        var a=[
           Math.abs(mCSB_container[0].offsetTop)-(distance[0]*_m((absDistance[0]/speed[0]),speed[0])),
           Math.abs(mCSB_container[0].offsetLeft)-(distance[1]*_m((absDistance[1]/speed[1]),speed[1]))
        ];
        amount=o.axis==="yx" ? [a[0],a[1]] : o.axis==="x" ? [null,a[1]] : [a[0],null];
        durB=[(absDistance[0]*4)+o.scrollInertia,(absDistance[1]*4)+o.scrollInertia];
        var md=parseInt(o.contentTouchScroll) || 0; /* absolute minimum distance required */
        amount[0]=absDistance[0]>md ? amount[0] : 0;
        amount[1]=absDistance[1]>md ? amount[1] : 0;
        if(d.overflowed[0]){_drag(amount[0],durB[0],easing,"y",overwrite,false);}
        if(d.overflowed[1]){_drag(amount[1],durB[1],easing,"x",overwrite,false);}
     }
     function _m(ds,s){
        var r=[s*1.5,s*2,s/1.5,s/2];
        if(ds>90){
           return s>4 ? r[0] : r[3];
        }else if(ds>60){
           return s>3 ? r[3] : r[2];
        }else if(ds>30){
           return s>8 ? r[1] : s>6 ? r[0] : s>4 ? s : r[2];
        }else{
           return s>8 ? s : r[3];
        }
     }
     function _drag(amount,dur,easing,dir,overwrite,drag){
        if(!amount){return;}
        _scrollTo($this,amount.toString(),{dur:dur,scrollEasing:easing,dir:dir,overwrite:overwrite,drag:drag});
     }
  },

我看到在桌面浏览器中用于从jQuery mobile滑动。从旋转木马更换卡片可以通过鼠标滑动（按住鼠标左键并向左或向右拖动）。使用jQuery mobile滑动代码：

$('.carousel').swiperight(function() {
   $(this).carousel('prev');
});
$('.carousel').swipeleft(function() {
   $(this).carousel('next');
});

经过多次尝试，我无法在＆＃34; jquery.mCustomScrollbar.js＆＃34;中进行更改。这样可以通过触摸手指在Android浏览器中获得相同的功能。我来自＆＃34; jquery.mCustomScrollbar.js＆＃34;的函数调用：

jQuery('.carousel-item').mCustomScrollbar({ axis:"y", theme: "rounded-dots", scrollButtons: { enable: true }, scrollInertia: 100});

对于你来说，在jquery.mCustomScrollbar.js中添加/更改代码片段比为我更容易获得两种浏览器（桌面，android）的类似功能。

P.S。当我使用时，我警告你：

contentTouchScroll: false

事实上，我在两种浏览器上都有类似的功能，但这不是因为我阻止了向上/向下滚动（滑动）手指向上/向下滚动的可能性。

github上发布的问题creator plugin

[但我想创作者的支持现在还不可能]

我非常感谢你的帮助。我失去了太多时间试图自己解决问题

关心Zic

Answer 1

这应该只从插件的上方部分删除e.stopImmediatePropagation()（_OnTouch / Start / Move / End）

BootStrap使用manos.malihu插件从Carousel转换到下一个选项卡

1 个答案: