从this thread开始,我选择了code here。
我复制了它,但它对我不起作用。该表看起来像是示例,但是当我滚动标题时也会向上滚动。我想我一定是在某个地方弄错了但是看不到它,有人可以帮我吗?
#wrap {
float: left;
overflow: auto;
height: 300px;
border: 1px solid black;
}
table {
border-spacing: 0;
}
table>*>tr>* {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
table>tbody> :last-child>* {
border-bottom: none;
}
th {
background-color: lightskyblue;
}
<script>
document.getElementById("wrap").addEventListener("scroll", function() {
var translate = "translate(0," + this.scrollTop + "px)";
this.querySelector("thread").style.transform = translate;
});
</script>
<div id="wrap">
<table>
<thead>
<tr>
<th colspan="2">
Colspanned Cell
</th>
</tr>
<tr>
<th>Foo bar baz qux quux lorem ipsum dolor sit amet consectetur adipisicing</th>
<th>Foo Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is a test</td>
<td>This is a test</td>
</tr>
<tr>
<td rowspan="3">Rowspanned cell</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>sit amet consectetur</td>
</tr>
<tr>
<td>adipisicing</td>
</tr>
<tr>
<td>testing 1 2 3</td>
<td>testing 1 2 3</td>
</tr>
<tr>
<td>a b c</td>
<td>d e f</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>testing 1 2 3 4</td>
<td>testing 1 2 3 4 5 6 7 8 9 0</td>
</tr>
<tr>
<td>The quick brown fox jumps over the lazy dog</td>
<td>HELLO WORLD!!!!</td>
</tr>
<tr>
<td>Foo bar</td>
<td>baz qux</td>
</tr>
<tr>
<td>quux</td>
<td>foo<br/>bar<br/>baz<br/>qux<br/>quux</td>
</tr>
<tr>
<td>THE</td>
<td>END</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分:1)
您提供的代码段有2个问题:
this.querySelector("thread"). ...
,它应该是this.querySelector("thead"). ...
*而不是“r”第二,也是最重要的,“脚本标记的位置.HTML中的内容按照它们在源代码中的顺序进行解析/评估/执行。当处理器点击脚本标记并执行时它,搜索到的元素尚未出现在DOM中。为此你应该:
jQuery(function(){ ... /* here */})
内或向身体添加处理程序
或答案 1 :(得分:0)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scroll Test03</title>
<style>
#wrap {
float: left;
overflow: auto;
height: 300px;
border: 1px solid black;
}
/* css for demo */
table {
border-spacing: 0;
}
table > * > tr > * {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
table > tbody > :last-child > * {
border-bottom: none;
}
th {
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="wrap">
<table>
<thead>
<tr>
<th colspan="2">
Colspanned Cell
</th>
</tr>
<tr>
<th>Foo bar baz qux quux lorem ipsum dolor sit amet consectetur adipisicing</th>
<th>Foo Bar</th>
</tr>
</thead>
<tbody>
<tr><td>This is a test</td><td>This is a test</td></tr>
<tr><td rowspan="3">Rowspanned cell</td><td>Lorem ipsum dolor</td></tr>
<tr><td>sit amet consectetur</td></tr>
<tr><td>adipisicing</td></tr>
<tr><td>testing 1 2 3</td><td>testing 1 2 3</td></tr>
<tr><td>a b c</td><td>d e f</td></tr>
<tr><td></td><td></td></tr>
<tr><td>testing 1 2 3 4</td><td>testing 1 2 3 4 5 6 7 8 9 0</td></tr>
<tr><td>The quick brown fox jumps over the lazy dog</td><td>HELLO WORLD!!!!</td></tr>
<tr><td>Foo bar</td><td>baz qux</td></tr>
<tr><td>quux</td><td>foo<br/>bar<br/>baz<br/>qux<br/>quux</td></tr>
<tr><td>THE</td><td>END</td></tr>
</tbody>
</table>
</div>
<script type="text/javascript" >
document.getElementById("wrap").addEventListener("scroll",function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead").style.transform = translate;
});
</script>
</body>
</html>