Prevent scrolling in Lucid Charts embedded viewer

When a Lucid Chart image is embedded in a web page, the Lucid viewer allows the accidental scrolling and zooming of the image. Currently, there is no option to disable these features.

There is a simple way to prevent accidental interaction with the Lucid Chart viewer. We can place a transparent layer on top of the image to isolate it.

• Create a 1 x 1 pixel transparent png file: transparent-1_1.png
• Enclose the embedded chart in a parent DIV and place the transparent layer on top of it
• Set the width and height in the parent DIV, and use ” width: 100%, height: 100% ” in the transparent IMG and the IFRAME code to match all sizes

This syntax is for Remix React.js, which uses {{ }} around the style elements, but it should be easy to reformat it for regular CSS

<div style={{width: '960px', height: '720px', margin: 'auto', position: 'relative'}}>
  <img src="transparent-1_1.png" style={{width: '100%', height: '100%', position: 'absolute'}}/> 
  <iframe allowFullScreen frameBorder="0" style={{width: '100%', height: '100%'}} src="https://lucid.app/documents/embedded/MY_GUID" id="MY_ID">
  </iframe>
</div>