如何移除Eventbrite结账Widget的iframe滚动条？

以下是针对你遇到的移动端滚动条问题的几种可行修复方案：

1. 用视口单位重构容器高度 #

将容器的height:100%替换为height:100vh，让容器直接占满整个移动端视口高度，同时添加滚动逻辑确保内容过长时可正常滚动：

<div id="eventbrite-widget-container-489731288460" style="display: block; height: 100vh; overflow-y: auto; margin: 0; padding: 0;"></div>

2. 移除固定高度配置，让Widget自适应 #

你设置的iframeContainerHeight:900在移动端会强制容器超出视口，直接移除该配置项，让Eventbrite Widget根据自身内容自动计算最小高度：

window.EBWidgets.createWidget({
    widgetType: 'checkout',
    eventId: '489731288460',
    iframeContainerId: 'eventbrite-widget-container-489731288460',
    onOrderComplete: exampleCallback
});

3. 动态适配iframe内容高度（JavaScript方案） #

如果自适应仍有问题，通过监听iframe加载事件，动态获取内容高度并调整容器尺寸（跨域场景下Eventbrite允许此操作）：

document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('eventbrite-widget-container-489731288460');
    const iframe = container.querySelector('iframe');
    
    if (iframe) {
        iframe.addEventListener('load', function() {
            try {
                const contentHeight = iframe.contentWindow.document.body.scrollHeight;
                container.style.height = contentHeight + 'px';
            } catch (e) {
                // 跨域失败时 fallback 到视口高度
                container.style.height = '100vh';
            }
        });
        
        // 窗口 resize 时重新适配
        window.addEventListener('resize', function() {
            container.style.height = '100vh';
        });
    }
});

4. 消除页面默认样式干扰 #

添加全局CSS清除页面默认边距，确保容器全屏展示：

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#eventbrite-widget-container-489731288460 iframe {
    width: 100% !important;
    border: none !important;
}

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