0

从这个线程，我拿起了这里的代码。

我已经复制了它，但它对我不起作用。该表看起来像示例，但是当我滚动时，标题也会向上滚动。我想我一定是在某个地方犯了错误，但看不到它，有人可以帮我吗？

#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>

4

2 回答 2

1

提供的代码段有 2 个问题：

  • 您的 javascript 代码中有错字，this.querySelector("thread"). ...应该是this.querySelector("thead"). ...* 没有“r”

  • 其次，也是最重要的，“脚本”标签的位置。HTML 中的内容按照它们在源代码中的顺序进行解析/评估/执行。在处理器点击脚本标签并执行它时，搜索到的元素是尚未出现在 DOM 中。为此，您应该：

    • 使那段代码在整个文档加载后运行。例如：在jQuery(function(){ ... /* here */})主体内部或添加处理程序。
      或者
    • （更简单）在您搜索的所有元素之后（我会说，至少在关闭表格和关闭包装器 div 之前）之后，将整个脚本标记/块向下移动到源代码中。
于 2018-02-27T21:49:58.213 回答
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>
于 2018-02-27T21:59:56.203 回答