Colorbox Lightbox - 删除 IFrame 的垂直滚动条答案

【问题标题】：Colorbox Lightbox - Remove Vertical Scrollbar of an IFrameColorbox Lightbox - 删除 IFrame 的垂直滚动条
【发布时间】：2014-07-31 10:37:06
【问题描述】：

<!DOCTYPE html>
<html>
<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>
        <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
    $("#test").click(function () { //on clicking the link above
        $(this).colorbox({iframe:true, width:"90%", height:"100%"});
    });
});
</script>
</head>
<body>
    <h3>External Form</h3>
<a href="https://dev88.wufoo.com/forms/ze7xusq0j2tum9/" id="test">Please fill out my form.</a>
</body>
</html>

它现在工作正常，但我需要在这段代码中删除滚动条，如何删除 iframe 的垂直滚动条？

谁能帮帮我？

【问题讨论】：

标签： jquery html css iframe colorbox

【解决方案1】：

试试这个。

$(document).ready(function () {
    $("#test").click(function () { //on clicking the link above
        $(this).colorbox({iframe:true, width:"90%", height:"100%", scrolling: false});
    });
});

【讨论】：

我仍然有疑问，表单没有完全显示，
@user3890317：这可能是因为您的容器太小而无法显示所有内容，并且您已禁用滚动。使用 CSS 或 jQuery 属性调整 iframe 的大小。

【解决方案2】：

根据文档：http://www.jacklmoore.com/colorbox/，您应该可以通过添加 scrolling:false 来做您想做的事情。

因此：

$(document).ready(function () {
    $("#test").click(function () { //on clicking the link above
        $(this).colorbox({iframe:true, width:"90%", height:"100%", scrolling: false});
    });
});

或者如果上述方法由于某种未知原因不起作用，请尝试将以下 CSS 代码添加到您的 <head> 元素中。

<style type="text/css">

    iframe {

        overflow: auto;
        overflow-y: hidden;

    }

</style>

您还可以创建一个单独的 CSS 文件并在其中应用样式。

【讨论】：

【解决方案3】：

添加滚动：false

$.colorbox({
    inline:true, 
    width:'95%',
    scrolling: false // *********
});

【讨论】：