从在 Internet Explorer 中呈现的 IFrame 中删除垂直滚动条答案

【问题标题】：Remove vertical scroll bar from IFrame that gets rendered in Internet Explorer从在 Internet Explorer 中呈现的 IFrame 中删除垂直滚动条
【发布时间】：2015-07-31 15:51:39
【问题描述】：

标题可能有点误导，因为这可能是一个由两部分组成的问题，对不起。但我正在尝试显示一个 iFrame（它显示一个协议 pdf），并且我想检测到用户在继续之前已经滚动浏览了文档以接受条款。我最初尝试检测用户滚动浏览 iFrame，但我无法将滚动事件连接到嵌入式 iFrame。这是第一部分，如果有人对滚动嵌入式 pdf 有任何建议或类似已回答问题的链接。我找不到解决方案。或者，正如您将在下面的代码中看到的那样，我尝试将 iframe 包装在外部 div 中，并使用它来检测我们已经到达底部。不幸的是，IE 显示了两个垂直滚动条。

我已经在堆栈中搜索了几个小时来寻找解决此问题的方法，但无法应用任何东西来帮助删除在 IE 中呈现的垂直滚动条。 Firefox 和 Chrome 都可以。 this 如果我的 iframe 不包含 pdf 链接（与文档在 IE 中的呈现方式有关），则链接将起作用。

如果代码过于复杂，请告诉我是否应该删除任何代码，我觉得这些都是必要的方面，因为我的最终目标是生成一个包含 pdf 的 iframe，用户必须滚动到该 iframe底部以便签署和提交表格。

<head>
    <style type="text/css">
    @-moz-document url-prefix() {
       #ifAgreement {
           height: 3390%;
       }
    }
    </style>
</head>
<body>

        <div id="div_iframe"><asp:HtmlIframe id="ifAgreement" runat="server" scrolling="no" width="97%" height="650px">
        </asp:HtmlIframe></div>

     <asp:panel id="pnlSign" runat="server">
     <p align="center">
  Please read and scroll through the document to accept the terms of the agreement before signing and continuing.
</p>
    <div class="sigPad">
        <ul class="sigNav">
            <li class="drawIt"><a href="#draw-it" class="current">Click To Sign</a></li>
            <li class="clearButton"><a href="#clear">Clear</a></li>
        </ul>
        <div class="sig sigWrapper">
            <canvas class="pad" width="300" height="75" style="border: black 1px solid;"></canvas>
            <input type="hidden" name="output" class="output">
        </div>
        <br />
        <button id="btnAgreeSubmit" type="submit" style="border: thin solid #000000; width: 300px; font-weight: bold;
            text-align: center; background-color: #CCCCCC; color: #000000;">
            I accept the terms of this agreement.</button>
    </div>
</asp:panel>  

    <script>
    $(document).ready(function () {
        $("button").attr("disabled", true);
        $('button').css('cursor', 'not-allowed');
        $('button').attr('title', 'You must read and scroll through the document before signing and submitting.');

        $('#div_iframe').scroll(function () {
            if ($('#ifAgreement').height() - $('#div_iframe').scrollTop() - $('#div_iframe').height() <= 100) {
                $("button").attr("disabled", false);
                $('button').css('cursor', 'pointer');
                $('button').attr('title', '');
            }
        });

        var options =
    {
        bgColour: "#ffffff",
        penColour: "#000000",
        penWidth: 2,
        penCap: "solid",
        lineColour: "#cccccc",
        lineWidth: 1,
        lineMargin: 0,
        lineTop: 100
    }
        $('.sigPad').signaturePad(options);
    });
</script>


</body>

css
#div_iframe {
border-style: inset;
border-color: grey;
overflow: scroll;
height: 650px;
width: 97%;
}

#ifAgreement {
width: 100%;
height: 4000%; 
}

【问题讨论】：

添加 overflow: hidden on #ifAgreement 似乎对我在 IE 中的情况没有任何作用。我看到这么多建议stackoverflow.com/questions/2898403/…

标签： jquery asp.net iframe webforms

【解决方案1】：

对 iFrame 使用溢出：隐藏，它会隐藏 IE 滚动条。 PDF 中的滚动条是其渲染的一部分，但我认为，从您的措辞方式来看，这不是问题。我认为您可能还需要在 iFrame 中调整对象的高度和宽度，但这只是我的想法。

【讨论】：

好的，谢谢你的建议。我尝试的“hack”是将 iFrame 的宽度设置为 101%，并将外部 div 上的 overflow-x 设置为隐藏。它摆脱了滚动条，但我觉得这并不理想。也许这首先是我的问题。试图为一个不寻常的问题制定一个“理想”的解决方案。
很多时候，你只需要退后一步。顺便说一句，我发现我的大脑通常会在我点击发送问题后立即打开。 ;-)

【解决方案2】：

我只是想发布我的“解决方案”作为答案，因为有时事情会在 cmets 中丢失。请注意，这是我为我的情况制作的一个技巧，它可能会在此过程中对某人有所帮助。虽然它确实解决了我的问题，但我不会解决这个问题；如果其他人找到更好的选择，我真的会敞开心扉。

#div_iframe {
border-style: inset;
border-color: grey;
overflow: scroll;
overflow-x: hidden; /*hide the horizontal scroll bar*/
height: 650px;
width: 97%;
}

#ifAgreement {
 width: calc(100% + 15px) /*101% worked in my situation. Force the iFrame's scrollbar behind the containing div*/
 height: 3900%; 
}

【讨论】：