You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

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);