iframe滚动条跟div滚动条怎么实现 联动

Posted 2023-04-13

div是iframe的父元素。

参考技术A 用jq写
//滚动事件
$(function()
$F("scrolltablefooter").scrollLeft=0;//页面加载时使滚动条在最左边.根据需求来的.可删除
$(".tablefooter").scroll(function()//滚动条滚动触发事件
$("#scrolltopmytableheader").css("margin-left",-($(".tablefooter").scrollLeft()));
//另一层也实现滚动条拖动.
);
);

这是我以前写过得一个例子.你参考下看看 参考技术B 去掉div的滚动条，就用iframe的就可以了追问

iframe滚动条我设置了scrolling=“yes”。但是在ie里没有显示滚动条。知道怎么解决吗。

追答

应该可以吧

追问

我是这样的。它没有显示。加了你后面那个allowTransparency=true后也没有。

追答

allowTransparency=true的意思是允许透明，有没有试过给iframe加个class属性，里面设置overflow属性？

追问

style="overflow-y:scroll"改成这个也不行。火狐里有的。但是ie里就是没有滚动条。

追答

你的页面声明是什么，可以改成试试

追问

这个是在母版页里的。改了的话会影响到别的部分的吧。纠结。~>_<~

追答

这个声明是html5标准声明，兼容性还蛮好

追问

是这个吗。

追答

换成

很简单的声明

本回答被提问者采纳

使用浏览器滚动条使 div 滚动 [重复]

【中文标题】使用浏览器滚动条使 div 滚动 [重复]

【英文标题】：Make div scroll with browser scrollbar [duplicate]

【发布时间】：2019-03-10 00:59:16

【问题描述】：

我有一个页面，其中包含两个 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"  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>

【参考方案1】：

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)" />