Calendly embed making scroll problems? Here's the fix

Calendly’s inline embed is useful, but its scroll behaviour on mobile is genuinely bad - particularly on iPhone and Safari. If your visitors are stuck, unable to scroll inside the widget or past it, you’re not imagining it. Here’s what causes it and what to do.

Why it happens

Calendly embeds via an <iframe>. On mobile, iframes and scroll events do not always play nicely together. The browser can’t always tell whether a scroll gesture is meant for the iframe content or the page itself, so it either traps the user inside the widget or ignores their input entirely.

Apple’s handling in Safari makes it noticeably worse, because Safari treats iframe scrolling more conservatively than Chrome-based browsers.

Fix 1 - Make the container tall enough to show the full widget

The most reliable fix is giving the embed container enough height that it never needs an internal scrollbar in the first place. If the widget fits without scrolling, the problem disappears.

<div class="calendly-inline-widget"
  data-url="https://calendly.com/YOUR_EVENT"
  style="min-width:320px;height:1000px;">
</div>

You can refine this per breakpoint with media queries:

@media (max-width: 768px) {
  .calendly-inline-widget {
    height: 1200px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .calendly-inline-widget {
    height: 1050px;
  }
}

@media (min-width: 1025px) {
  .calendly-inline-widget {
    height: 900px;
  }
}

The right height depends on how many fields your booking form has. If you offer multiple event types or ask guests to answer questions, go taller.

Fix 2 - Switch to the popup embed

Calendly’s popup variant sidesteps the iframe scroll problem entirely, because the widget appears in an overlay rather than inline in your page. A button triggers it:

<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<a href=""
   onclick="Calendly.initPopupWidget({url: 'https://calendly.com/YOUR_EVENT'});return false;">
  Book a time
</a>
<!-- Calendly link widget end -->

The trade-off is that it adds a click step before the calendar appears. For most booking flows this is a reasonable swap.

Fix 3 - Remove the scrollbar on iPhone Safari specifically

If you need the inline embed and cannot make it tall enough to eliminate scrolling, this CSS hides the scrollbar on Apple devices without breaking the scroll behaviour itself:

.calendly-inline-widget {
  overflow: hidden;
}

Note: this hides the scrollbar indicator but does not fix the underlying scroll trap on all devices. Use it alongside Fix 1, not instead of it.

Calendly’s position on this

Calendly’s support team acknowledges the limitation. The long-term fix on their side involves iframe height notification improvements - essentially the embed signalling its actual height to the parent page so the container auto-sizes. Until that ships reliably, the workarounds above are what you have.

If scroll behaviour is just one of several things behaving oddly on your site, we do quick rescue and triage work - tell us what’s broken and we’ll give you a straight answer on what needs fixing.