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

Question

Windows desktop application need to present screen containing two tables. Windows桌面应用程序需要显示包含两个表的屏幕。 If right table is scrolled using mouse wheel, left table should scroll automatically to same position. 如果使用鼠标滚轮滚动了右表，则左表应自动滚动到相同位置。 It behaves like frozen columns in spreadsheet application. 它的行为类似于电子表格应用程序中的冻结列。 I tried to use two frames in frameset for this. 我试图在框架集中使用两个框架。

I tried to create 3 html files below and open main.htm in IE. 我试图在下面创建3个html文件并在IE中打开main.htm。 On right table scroll left table is not scrolled no error message in IE. 在右表上滚动左表不滚动，在IE中没有错误消息。 In Chrome and Firefox error message that cross site scipting is disabled happens. 在Chrome和Firefox中，发生错误消息，指出跨站点加密已禁用。

I turned XSS fileter of in IE settings but problem persists. 我在IE设置中启用了XSS fileter，但问题仍然存在。 It looks like javascript 看起来像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;">

in iframe2.htm is blocked. 在iframe2.htm中被阻止。

This code worked many years ago. 该代码在很多年前就起作用了。 How to make it working in modern desktop Windows operatino system? 如何使其在现代桌面Windows操作系统中运行？ Is there some security settings which can turned off or can this code refactored into sigle html file which uses two divs to simulate tables or other way ? 是否有一些可以关闭的安全设置，或者可以将此代码重构为使用两个div模拟表或其他方式的html文件？ In real application left table is wide, horizontal scrollbar should be present in it. 在实际应用中，左表很宽，其中应包含水平滚动条。

main.htm: main.htm：

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

frame1.htm: 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: 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

Using frames will only complicate this. 使用框架只会使情况复杂化。 If possible, put it all on one page. 如果可能，请将它们全部放在一页上。

Put each table in a div. 将每个表放在div中。
Position the div's side by side. 将div并排放置。
Give them the same height. 给他们相同的高度。
Make them overflow: auto so they scroll. 使它们overflow: auto使它们滚动。

Then use some Javascript+jQuery to synchronize the scroll positions. 然后使用一些Javascript + jQuery来同步滚动位置。 Something like this: 像这样：

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

Note: This only handles vertical scrolling. 注意：这仅处理垂直滚动。 You can use scrollLeft() to sync horizontal scrolling too if needed. 如果需要，您也可以使用scrollLeft()来同步水平滚动。

I set all this up in a jsfiddle for you: 我为您在jsfiddle中设置了所有这些：

http://jsfiddle.net/gwcoffey/9EfUy/ 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