通过使用固定标题在水平和垂直方向上单击和拖动来滚动表

Question

我想要一个表，用户可以单击并拖动该表在水平和垂直方向上滚动，但将表头固定在顶部。

Answer 1

You can drag and scroll vertically using eventListeners. To keep the header fixed you can create a copy of the table and hide the body of one and hide the header of the other. Copying the whole table ensures that the widths stay the same. You can then make the header table scroll horizontally when the body table is scrolled horizontally.

 var tableBody = document.getElementById('scrollDragable'); var headerTable = document.getElementById('scrollDragableHeader'); var curDown = false var oldScrollLeft = 0; var oldScrollTop = 0; var curXPos = 0; var curYPos = 0; tableBody.addEventListener("mousemove", function(e) { if (curDown === true) { tableBody.scrollLeft = oldScrollLeft + (curXPos - e.pageX); headerTable.scrollLeft = oldScrollLeft + (curXPos - e.pageX); tableBody.scrollTop = oldScrollTop + (curYPos - e.pageY); } }) tableBody.addEventListener("mousedown", function(e) { curDown = true; curYPos = e.pageY; curXPos = e.pageX; oldScrollLeft = tableBody.scrollLeft; oldScrollTop = tableBody.scrollTop; }) tableBody.addEventListener("mouseup", function(e) { curDown = false; }) //Ensures the header scrolls when the user uses the scrollbar tableBody.addEventListener("scroll", function(e) { headerTable.scrollLeft = tableBody.scrollLeft; }) 

 #scrollDragable { width: auto; height: 600px; overflow-x: scroll; overflow-y: scroll; border: 1px solid #ccc; /* Prevent the text from highlighting when dragging */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #scrollDragableHeader { border: 1px solid #ccc; overflow-x: hidden; overflow-y: scroll; /* Prevent the text from highlighting when dragging */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 

 <div id="scrollDragableHeader"> <!--Create a table and hide the body but show the header --> <table> <thead> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> <th>Column6</th> <th>Column7</th> <th>Column8</th> <th>Column9</th> <th>Column10</th> <th>Column11</th> <th>Column12</th> <th>Column13</th> <th>Column14</th> <th>Column15</th> <th>Column16</th> <th>Column17</th> </tr> </thead> <tbody hidden> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> </tbody> </table> </div> <div id="scrollDragable"> <!--Create a clone of the table and hide the header and show the body--> <table> <thead style="visibility:collapse;"> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> <th>Column6</th> <th>Column7</th> <th>Column8</th> <th>Column9</th> <th>Column10</th> <th>Column11</th> <th>Column12</th> <th>Column13</th> <th>Column14</th> <th>Column15</th> <th>Column16</th> <th>Column17</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> </tbody> </table> </div>