如何在html中模拟冻结的列：在右表中的鼠标滚轮上滚动左表

Question

Windows桌面应用程序需要显示包含两个表的屏幕。 如果使用鼠标滚轮滚动了右表，则左表应自动滚动到相同位置。 它的行为类似于电子表格应用程序中的冻结列。 我试图在框架集中使用两个框架。

我试图在下面创建3个html文件并在IE中打开main.htm。 在右表上滚动左表不滚动，在IE中没有错误消息。 在Chrome和Firefox中，发生错误消息，指出跨站点加密已禁用。

我在IE设置中启用了XSS fileter，但问题仍然存在。 看起来像JavaScript

onscroll="if (navigator.userAgent.indexOf('Gecko/') != -1)
  window.parent.frame1.document.body.offsetTop=document.body.offsetTop;
else 
  window.parent.frame1.document.body.scrollTop=document.body.scrollTop;">

在iframe2.htm中被阻止。

该代码在很多年前就起作用了。 如何使其在现代桌面Windows操作系统中运行？ 是否有一些可以关闭的安全设置，或者可以将此代码重构为使用两个div模拟表或其他方式的html文件？ 在实际应用中，左表很宽，其中应包含水平滚动条。

main.htm：

<head></head>
<frameset cols="415px,*" frameborder=off>
<frame id=frame1 src="frame1.htm">
<frame id=frame2 src="frame2.htm">
</frameset>

frame1.htm：

<HTML>
<BODY style="overflow-y:hidden;overflow-x:scroll;margin: 0 0 0 0" 
onload="parent.document.body.cols=(document.getElementById('me').offsetWidth) + 'px,*';">

<table id="me">

<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
<tr><td>row3</td></tr>
....
<tr><td>rown</td></tr>
</table></body></html>

frame2.htm：

<HTML>
<body nowrap leftmargin=0 topmargin=0 
onscroll="if (navigator.userAgent.indexOf('Gecko/') != -1)
  window.parent.frame1.document.body.offsetTop=document.body.offsetTop;
else 
  window.parent.frame1.document.body.scrollTop=document.body.scrollTop;">

<table>
<tr><td>rightrow1</td></tr>
<tr><td>rightrow2</td></tr>
...
<tr><td>rightrown</td></tr>

</table></body></html>

Answer 1

使用框架只会使情况复杂化。 如果可能，请将它们全部放在一页上。

将每个表放在div中。
将div并排放置。
给他们相同的高度。
使它们overflow: auto使它们滚动。

然后使用一些Javascript + jQuery来同步滚动位置。 像这样：

$(".left, .right").on("scroll", function() {
   $(".left, .right").scrollTop($(this).scrollTop());
});

注意：这仅处理垂直滚动。 如果需要，您也可以使用scrollLeft()来同步水平滚动。

我为您在jsfiddle中设置了所有这些：

http://jsfiddle.net/gwcoffey/9EfUy/

如何在html中模拟冻结的列：在右表中的鼠标滚轮上滚动左表

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-06-01 22:10:20

如何在html中模拟冻结的列：在右表中的鼠标滚轮上滚动左表

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-06-01 22:10:20

解决方案1
0 已采纳 2014-06-01 22:10:20