Touch scroll in <layer>

  • I struggled with a bug/behavior in <layer> tag on touch devices. I have the following XML structure:

    In url="%$assetsUrl%/plugins/custom/infocard.js" plugin I create an HTML element which must be scrollable. Scroll works well with a mouse, but doesn't work on touch devices like mobile or laptop with touch screen.


    I've tried different variations of CSS rules (overflow: scroll, very high z-index, touch-action etc.), <layer> attributes (capture, bgcapture etc.), scrollarea plugin, but neither works. However the "touchstart", "touchmove" events on my custom element work well, so that means that no html parent element calls `e.stopPropagation()`. So I did not figure out what prevents touch scroll from working.


    Does someone has any idea about it?

  • Thanks Klaus *smile* That helped. *thumbup*
    I've just adapted the following code from Postprocessing Demo: Popups with Background-Blur :

    Code
    // enable browsed-based mouse-wheel and touch-scrolling support:
    div.addEventListener("wheel", stopPropagation, true);
    div.addEventListener("mousewheel", stopPropagation, true);
    div.addEventListener("DOMMouseScroll", stopPropagation, true);
    div.addEventListener("touchstart", function(event){ if(krpano.device.ios && window.innerHeight == krpano.display.htmltarget.offsetHeight){ /* avoid the iOS 'overscrolling' for fullpage viewers */ var bs = document.body.parentNode.style; bs.position="fixed"; bs.top=0; bs.left=0; bs.right=0; bs.bottom=0; } krpano.control.preventTouchEvents = false; event.stopPropagation(); }, true);
    div.addEventListener("touchend", function(event){ krpano.control.preventTouchEvents = true; event.stopPropagation(); }, true);
    div.addEventListener("gesturestart", preventDefault, true);

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!