0

有一个表格，其中要显示的行数和列数是事先不知道的。这是在 JSP 中生成的，如

  <thead>
   <tr>
     <c:foreach col=${Dcol} >
      ...
     </c:foreach>
   </tr>
   </thead>

即列的宽度不固定

水平滚动时，标题行应水平滚动。

垂直滚动时，标题行应保持固定。

虽然这里有一个解决方案水平和垂直的可滚动表格，带有固定的标题

我想知道我是否可以使用两个单独的表（表1用于标题行，表2用于所有其他行）并通过在第二个表上绑定水平滚动事件来调用水平滚动第一个表的函数来同步它们的水平滚动。这可以通过简单的 javascript 来完成，因为表格只有一个 onscroll 事件而没有特定滚动方向的事件？

请提供任何纯 JavaScript 解决方案或步骤序列。谢谢

4

1 回答 1

0

您可以position:absolute在window.onscroll事件上使用并确定 for window.pageYOffsetor document.body.scrollTop，例如：

//first the CSS
#headerContainer{
  padding:0; position:relative; overflow:visible;
}
#header{
  margin:0; padding:0; position:absolute; top:0; left:0; z-index:99;
}
//now the JavaScript
var win = window, doc = document, bod = doc.getElementsByTagName('body')[0];
function E(e){
  return doc.getElementById(e);
}
var pT = 0;
function nice(elementId, offsetParentTop){
  var hs = E(elementId).style;
  var sy = win.pageYOffset || bod.scrollTop;
  if(sy !== pT){
    pT = sy+offsetParentTop;
    hs.top = pT+'px';
  }
}
onscroll = function(){
  nice('header', 30);
}

您可以使用一系列Element.offsetTop属性来确定您的offsetParentTop论点。这真的取决于你的标题有多深。

于 2013-07-19T23:23:03.837 回答