Scrolling Past an Embedded Simplebooklet

If your website visitors are getting stuck inside your embedded Simplebooklet and can't scroll the page, here's what's happening and how to fix it.

Why This Happens

When a Simplebooklet is embedded via iframe, it acts as a window into your booklet. When a visitor's cursor is inside the booklet, the iframe takes over all scrolling — the page underneath becomes unresponsive until the cursor moves outside the booklet area. This is how iframes work in browsers and isn't something that can be changed inside Simplebooklet itself.

The Fix — Script Wrapper

The most reliable solution is a script wrapper that keeps the booklet inactive (scroll passes through to the page) until a visitor deliberately clicks on it. Once clicked, the booklet becomes fully interactive. Clicking anywhere outside it returns scroll control back to the page.

Replace your current embed code with the following, swapping in your own Simplebooklet embed URL:

<div class="booklet-wrapper-page">
  <iframe src="YOUR-SIMPLEBOOKLET-EMBED-URL" width="100%" height="625" frameborder="0"></iframe>
</div>

<style>
/* Allow scrolling over the embed by default */
.booklet-wrapper-page iframe {
  pointer-events: none;
}

/* Enable interaction after user clicks the booklet */
.booklet-wrapper-page.active iframe {
  pointer-events: auto;
}
</style>

<script>
(function () {
  const wrapper = document.querySelector('.booklet-wrapper-page');
  if (!wrapper) return;

  document.addEventListener('click', function (e) {
    if (wrapper.contains(e.target)) {
      wrapper.classList.add('active');
    } else {
      wrapper.classList.remove('active');
    }
  });
})();
</script>

Other Options

If you can't add custom code to your website, there are a couple of simpler approaches:

• Add generous margin around the embed — at least 40px on the bottom and sides — so visitors have space to position their cursor outside the booklet and scroll the page.

• Use your Simplebooklet link instead — a button or link that opens your booklet in a new tab avoids the scroll issue entirely.

Can't Edit Your Website Code?

If you're on a platform like Wix, Squarespace, or Elementor and can't add a custom script, use the margin approach or share your booklet link instead. Contact your web developer if you need help adding the script wrapper.

Related Articles

• Embed on a Webpage

• Embed on Shopify

• Share Your Simplebooklet

Updated on: 13/05/2026