使用浏览器滚动条使 div 滚动
Make div scroll with browser scrollbar
我有一个页面,其中两个 iframe 在两个 div 中并排放置。我想删除第二个 iframe 上的滚动条,以便 iframe 与浏览器滚动条一起滚动。带有不需要的滚动条的 iframe 包含一个 gridview,当数据变得比浏览器高度长时,滚动条出现。
<div data-dx-role="view" data-dx-name="Index" data-dx-title="Home" style="height: 100%">
<div data-dx-target-placeholder="content">
<div id="treeframe" class="ui-widget-content" style="position: absolute; overflow-x: scroll; width: 20%; overflow: hidden; bottom: 0px; top: 0px; left: 0px; z-index: 1">
<iframe class="iframeformat" height="1100" style="width: 100%; overflow: auto;" id="ifrmtree" src="./SiteTree.aspx"></iframe>
</div>
<div id="contentframe" class="mobform" style="position: relative; overflow: hidden; top: 0px; width: 100%%; height:100%" aria-haspopup="False">
<iframe id="ifrmlogin" class="embed-responsive-item" src="./DashboardHome.aspx" style="height: 1100px; overflow: hidden; width: 100%; border: none;"></iframe>
</div>
</div>
</div>
.aspx 带有 Gridview 的页面:
<dx:ASPxGridView ID="ASPxGridView1" runat="server" Style="align-content: center;height:100%; text-align: center; overflow:hidden;" OnHtmlDataCellPrepared="ASPxGridView1_HtmlDataCellPrepared" CssClass="auto-style1" RightToLeft="False" Width="100%">
<Settings VerticalScrollBarMode="Hidden"/>
<SettingsPager Mode="ShowAllRecords" PageSize="30">
<PageSizeItemSettings ShowAllItem="True">
</PageSizeItemSettings>
</SettingsPager>
</dx:ASPxGridView>
This Javascript solution 几年前对我很有帮助,但只有当 iframe
内容位于同一域时才有效:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
我有一个页面,其中两个 iframe 在两个 div 中并排放置。我想删除第二个 iframe 上的滚动条,以便 iframe 与浏览器滚动条一起滚动。带有不需要的滚动条的 iframe 包含一个 gridview,当数据变得比浏览器高度长时,滚动条出现。
<div data-dx-role="view" data-dx-name="Index" data-dx-title="Home" style="height: 100%">
<div data-dx-target-placeholder="content">
<div id="treeframe" class="ui-widget-content" style="position: absolute; overflow-x: scroll; width: 20%; overflow: hidden; bottom: 0px; top: 0px; left: 0px; z-index: 1">
<iframe class="iframeformat" height="1100" style="width: 100%; overflow: auto;" id="ifrmtree" src="./SiteTree.aspx"></iframe>
</div>
<div id="contentframe" class="mobform" style="position: relative; overflow: hidden; top: 0px; width: 100%%; height:100%" aria-haspopup="False">
<iframe id="ifrmlogin" class="embed-responsive-item" src="./DashboardHome.aspx" style="height: 1100px; overflow: hidden; width: 100%; border: none;"></iframe>
</div>
</div>
</div>
.aspx 带有 Gridview 的页面:
<dx:ASPxGridView ID="ASPxGridView1" runat="server" Style="align-content: center;height:100%; text-align: center; overflow:hidden;" OnHtmlDataCellPrepared="ASPxGridView1_HtmlDataCellPrepared" CssClass="auto-style1" RightToLeft="False" Width="100%">
<Settings VerticalScrollBarMode="Hidden"/>
<SettingsPager Mode="ShowAllRecords" PageSize="30">
<PageSizeItemSettings ShowAllItem="True">
</PageSizeItemSettings>
</SettingsPager>
</dx:ASPxGridView>
This Javascript solution 几年前对我很有帮助,但只有当 iframe
内容位于同一域时才有效:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />