Question

嗨我有一个我制作的全屏幕滑块，我面临的问题是因为它的全屏我无法用手指在屏幕上滚动所以触摸设备使用IE10或11无法向下滚动。

在CSS中，您必须启用-ms-touch-action to none才能禁用控件上的所有触摸事件，以便javascript touch操作可以正常工作。所以我可以向左和向右滑动动画但是当我向下移动页面时它不会滚动，因为滑块占据了整个屏幕，其中有-ms-touch-action：none - 所以就在那里在我的情况下启用滚动滚动。

CSS：

.slider {       
    -ms-touch-action: none;
    position: relative;
    background: pink;
}

jQuery的：

var touchStart = window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart",
var touchMove  = window.navigator.msPointerEnabled ? "MSPointerMove" : "touchmove",
var touchEnd   = window.navigator.msPointerEnabled ? "MSPointerUp"   : "touchend";              


_this.$elem.on(touchStart + ' ' + touchEnd + ' ' + 'mousedown mouseup', function(event) {

    if( $(event.target || event.srcElement).hasClass('btn-next') || 
        $(event.target || event.srcElement).hasClass('btn-prev') ||
        $(event.target || event.srcElement).parent().hasClass('.slider-nav')) return;

    var diff,
        e = event.originalEvent;

    //event.stopPropagation(); 
    //event.preventDefault();

    //_this.$elem.addClass('enable-touch');

    if(!isAnimating) {
        switch(event.type) {
            case 'touchstart' :
                //console.log('touchstart');
                startX = e.touches[0].pageX;                            

            case 'touchend' :
                //console.log('touchend');
                endX = e.changedTouches[0].pageX;
                break;
            case 'MSPointerDown' :
                // console.log('MSPointerDown');
                startX = e.pageX;                       

            case 'MSPointerUp' :
                //console.log('MSPointerUp');
                endX = e.pageX; 

                break;
            case 'mousedown' :                      
                //console.log('not dragged');
                    isDragging = false;                             
                    $(window).mousemove(function() {
                        isDragging = true;
                        console.log('is dragging x=' + e.pageX);
                        startX = e.pageX;                                   
                        $(window).unbind("mousemove");
                    });
                break;
            case 'mouseup' :
                //console.log('dragged x=' + e.pageX);
                var wasDragging = isDragging;
                isDragging = false;
                $(window).unbind("mousemove");                          
                if (wasDragging) {  
                    wasDragging = false;
                    isDragging = false;                     
                    endX = e.pageX;
                }
                break;                  
        }

        diff = Math.abs(startX - endX);

        if(startX != undefined && startX > endX && diff > 100) {                        
            _this.slide('left');    
            startX = 0;
            endX   = 0; 
            //_this.$elem.removeClass('enable-touch');

        } else if(startX != undefined && startX < endX && diff > 100) {                     
            _this.slide('right');
            startX = 0;
            endX   = 0; 
            //_this.$elem.removeClass('enable-touch');              
        }
    }
});

Answer 1

我认为您需要使用：

.slider {       
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    position: relative;
    background: pink;
}

这会打开pan-y事件传播的能力（你可能也想要双击和其他一些动作）。您只想从触摸操作中删除pan-x，其余部分保持不变。

你也需要没有前缀的触摸动作，因为在IE11中不推荐使用前缀版本（我想在IE Edge中删除了它）。

如果没有正确的触摸操作，您将立即获得指针取消事件，之后会出现一个指针取消事件。

在IE10上使用全屏滑块的-ms-touch-action问题

1 个答案: