Disable scrolling for iFrame tour

[stalwart]

Hi all,

Client is working on a new website incorporating a tour in an iFrame - and would like zoom to only be controlled by the + and - buttons on the UI control menu and NOT by scrolling, as this is causing people to get stuck as they cannot scroll past the 360 image on mobile browser as is full width.

You can see the problem here: http://halo.xronn.com

How do I disable zoom in/out with mouse / scrolling?

Stu

[Tony]

Hi Stu,

Here is sample page with a tour in an iFrame https://tonyredhead.com/pano2vr-disable ... ing-iframe. The panorama can be panned using the mouse but the mouse scroll zoom in and out has been disabled and only the buttons can zoom in and out.

To disable the mouse scroll open the Output > Control drop down menu and check Mouse Wheel: Disabled




Try it and let me know how you get on.

cheers,

Tony

[G.Roumestan]

Hi,

trying to do the same but it seems to disable zooming instead to scroll the iframe... what do I do wrong?

G.R.

[Tony]

Hi G.R,

Even though the title of the post says "Disable scrolling for iFrame tour" the actual question asked was in relation to disabling Zoom not Scrolling.

So when you check Mouse Wheel: Disable that's what you get.

So my question is what do you mean by "scroll the iFrame"?

Tony

[G.Roumestan]

Hi,

what I would like to do is to be able to scroll the page even if the mouse is over the virtual tour like the example above and this link for example :

https://chrisogrady.com/360-virtual-tours/

Here is my website and the school is blocked on mouse over.

https://www.munera-photo.com/visite-virtuelle/

Any possibilities to do the same?

GR

[Tony]

Hi,

Looking at the chrisogrady example and the page code, in the div that contains the panorama they have used the CSS property touch-action: none

If you open the site and view the Developer tools you will see that the starting div looks like this.

<div id="viewer" style="overflow: hidden; user-select: none; touch-action: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);">

It's nothing to do with Pano2VR but how you code the embedding into the website.

This page has more information on the CSS Property https://css-tricks.com/almanac/properti ... ch-action/

I'd be interested to see how you get on, post an update when you have implemented it.

Tony