如何移除嵌入Calendly日程表的滚动条？

方法1：调整容器高度 #

Calendly的滚动条通常是因为容器高度不足以容纳全部内容。你可以尝试调高容器的height值，比如将原代码中的height:630px调整为更大的数值（例如height:700px），或者根据页面布局设置为height:auto（部分场景下有效）：

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

方法2：用CSS强制隐藏滚动条 #

如果调整高度后仍有滚动条，可以通过CSS直接隐藏组件内部的滚动条。在你的网站样式表中添加以下代码：

/* 隐藏Calendly容器及内部iframe的滚动条 */
.calendly-inline-widget {
  overflow: hidden !important;
}

.calendly-inline-widget iframe {
  overflow: hidden !important;
  height: 100% !important;
  width: 100% !important;
}

方法3：监听加载事件动态适配高度 #

Calendly提供了加载完成的事件，你可以通过JavaScript监听该事件，动态获取内容实际高度并设置给容器，从根源避免滚动条出现：

// 监听Calendly组件加载完成事件
document.addEventListener('calendly.loaded', function() {
  const widgetContainer = document.querySelector('.calendly-inline-widget');
  const innerIframe = widgetContainer.querySelector('iframe');
  
  if (innerIframe) {
    // 获取内容实际高度并设置给容器
    const contentHeight = innerIframe.contentWindow.document.body.scrollHeight;
    widgetContainer.style.height = contentHeight + 'px';
    // 确保iframe无滚动条
    innerIframe.style.overflow = 'hidden';
  }
});

注意：部分浏览器对跨域iframe的DOM访问有限制，如果第三种方法无法获取到内部高度，优先尝试前两种方法。

内容的提问来源于stack exchange，提问作者ohmygodimpregnant