You are not logged in.

1

Friday, February 21st 2020, 4:12pm

Touch scroll in <layer>

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

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<layer name="infocard_container"
  type="container"
  handcursor="false"
  parent="STAGE"
  capture="true"
  bgcapture="true"
  maskchildren="true"
  keep="true"
  width="340"
  height="100%"
  x="0"
  y="0"
  alpha="0"
  autoalpha="true">
    <layer name="infocard"
      url="%$assetsUrl%/plugins/custom/infocard.js"
      width="100%"
      height="100%"
      enabled="true"
      capture="true"
      bgcapture="true"
      children="true"
      maskchildren="true" />
</layer>


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?

2

Tuesday, February 25th 2020, 10:15am

Hi,

that's indeed a bit tricky.

Please have a look at this example:
https://krpano.com/examples/#pp-blur

and there at the 'add_html_code' <action>.
That actions prepares the html element to allow the default browser scrolling.

Best regards,
Klaus

3

Friday, February 28th 2020, 2:56pm

Resolved

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

Source code

1
2
3
4
5
6
7
// 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);