Disable page scroll with figma embed

Ask the community
1

Hey folks, I want to use Figma embed to easily include designs and diagrams in my website.

However, there’s a weird behavior that occurs when the page that includes the Figma iframe contains a scroll bar: panning on the Figma canvas causes the main page to scroll up, which is confusing for the end-user.

Here is a minimum reproducible file

<html>
<head>
	<style>
		body {
			height: 2000px;
		}
	</style>
</head>

<body>
	<h1>Figma Embed</h1>
	<iframe height="450" width="800"
		src="https://www.figma.com/embed?embed_host=astra&url=https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File"
		allowfullscreen></iframe>
</body>
</html>

Has anybody faced a similar issue?

2

Here is a video

3

Yes, I’m facing a similar issue & also the whole page containing the iframe “jumps up” around 200-300px.