Question

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

我已经搜索堆栈数小时寻找这个问题的解决方案，但是还没有能够应用任何东西来帮助删除在IE中呈现的垂直滚动条。 Firefox和Chrome都可以。如果我的iframe不包含pdf（在IE中如何呈现文档），this链接就会起作用。

如果我的代码太复杂，请告诉我是否应删除任何代码，我觉得这些都是必要的方面，因为我的最终目标是生成包含pdf的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%; 
}

Answer 1

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

Answer 2

我只想发布我的“决议”作为答案，因为有时候评论会丢失。记下这是一个黑客，我为我的情况工作，可能会帮助一路上的人。虽然它确实解决了我的问题，但我会留下未解决的问题;如果别人找到更好的选择，我会真的开放。

#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%; 
}

从IFrame中删除在Internet Explorer

2 个答案: