如何在 iframe 内水平滚动 div 表？答案

【问题标题】：How do I horizontal scroll a div table inside an iframe?如何在 iframe 内水平滚动 div 表？
【发布时间】：2020-04-01 07:08:05
【问题描述】：

所以我有一个表格，在 iframe 内，在另一个框架内，我希望能够通过单击它所在框架之外的锚标记水平滚动到指定位置。我最初使用的是内联js 方法（当表格不同时）有效，但现在我已更新为 CSS，该方法不起作用。因此，我正在向您的专业人士寻求帮助:) 提前致谢。

我正在使用的示例代码：

我使用的 HTML 框架指的是表格所在的框架：

<iframe src="PrimaryTables.html" id="FrameTableIsIn" name="FrameTableIsIn" scrolling="yes" align="middle" height="1350" width="100%" marginwidth="0" marginheight="0" frameborder="no"></iframe>

iframe (FrameTableIsIn) 内的 HTML 文档：

<div class="container" id="contained">
<table width="100%" cellspacing="1" cellpadding="0" border="0" id="primerows">
<tr>
    <td class="fixed">STUFF HERE</td>
    <td class="fixedspecial"align="center" valign="middle">STUFF HERE THAT OVERLAPS THE PREVIOUS TD STUFF NICELY</td>
    <td>OTHER STUFF HERE REPEATING COLUMNS</td>
</tr>
</table>
</div>

处理一个非常长的表格的很多行和列，因此可以很好地与 CSS 配合使用：

<style>
td, th {
    white-space: nowrap;
    min-width: 100px;
    height:32px;
    vertical-align: middle;
}
.container {
    overflow-x: scroll;
    margin-left: 100px;
}
.fixed {
    height:30px;
    border: 1px solid #000000;
    position: absolute;
    left: 0;
    display: inline-table;
    text-align: center;
    vertical-align: middle;
}
.fixedspecial {
    border: 1px solid #000000;
    position: absolute;
    left: 0;
    height:35px;
}
</style>

在 iframe (FrameTableIsIn) 之外的页面上像这样内联 java，我想在 iframe (FrameTableIsIn) 内影响文档：

<A HREF="javascript:parent.InitialFrame.FrameTableIsIn.scrollTo(110,0);parent.InitialFrame.scrollTo(0,50);" TARGET="InitialFrame">Link Text Here</A>

使用我的旧表格（html 3 或其他内容），我能够单击链接，页面将水平滚动（跳转）表格到指定位置，然后滚动（跳转）到页面顶部请参阅链接上方 iframe 中的表格。现在使用 css 等，它将向上滚动页面，但不会水平滚动嵌入 iframe 中的表格，因为滚动功能被困在 div 元素内，我不知道这里的正确句柄......

如果可能的话，内联 java 是首选，所有 java 脚本编写的东西都会阻塞我已经疯狂/意大利面条式的编码，让我想起 Pascal 真的...... :)（对于那些仍然知道那是什么的人:)

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

因此，对于那些可能需要了解的人来说，似乎没有办法仅使用内联 javascript 方法从 iframe 外部调用 iframe 到 div 表。所以我的解决方案，就像我的旧表一样，是将表从 iframe 中拉出，id 为 div (DivTable)，然后我能够让内联 javascript 工作：

<A HREF="javascript:parent.InitialFrame.DivTable.scrollTo(2580,0);" TARGET="InitialFrame">LINK HERE</a>

现在我的链接将带有固定列的 Div 表滚动到由 scrollto (x,y) 设置的位置。请记住，InitialFrame 是表和链接现在共享的框架，目标可能只是 (_top)，但现在我还没有搞砸它，因为它可以工作:)。希望这对将来的某人有所帮助...

【讨论】：