-ms-touch-action issue with full screen slider on IE10

Question

Hi I have a slider that I made which is full screen, the problem I'm facing is because it's full screen I'm unable to scroll with my finger on the screen so touch devices that use IE10 or 11 aren't able to scroll down.

In the CSS you have to enable -ms-touch-action to none to disable all touch events on the control so the javascript touch actions can work. So I can swipe left and right and the animations work but when I go to move the page down it won't scroll because the slider takes up whole screen which has the -ms-touch-action: none - so is there away to enable scrolling with touch in my situation.

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

I think you need to use:

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

That turns on the ability for the pan-y events to propagate (you probably want double clicks and some other actions too). You only want to remove pan-x from the touch-actions and leave the rest the same.

You need the unprefixed touch-action too because the prefixed version was deprecated in IE11 (and I think removed in IE Edge).

Without the correct touch-action, you will get a pointerdown event immediately followed by a pointercancel event.