javascript - 固定标题表在水平滚动时出现问题

标签 javascript jquery html css

我正在尝试使用固定标题表创建一个演示。第一个表格水平滚动工作正常，但第二个表格水平滚动条出现问题。当我滚动第二个表的水平滚动条时，垂直滚动条区域不固定。我正在分享我的代码。

表格演示:

// JS
$('#maintalbe .pane-hScroll').scroll(function() {
  $('.pane-vScroll').width($('.pane-hScroll').width() + $('.pane-hScroll').scrollLeft());
});
* {
  box-sizing: border-box;
}
body {
  font: 14px/1 Arial, sans-serif;
}
table {
  border-collapse: collapse;
  background: white;
  table-layout: fixed;
  width: 100%;
}
th, td {
  padding: 8px 16px;
  border: 1px solid #ddd;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane {
  background: #eee;
}
.pane-hScroll {
  overflow: auto;
  width: 400px;
  background: green;
}
.pane-vScroll {
  overflow-y: auto;
  overflow-x: hidden;
  height: 200px;
  background: red;
}

.pane--table2 {
  width: 400px;
  overflow-x: scroll;
}
.pane--table2 th, .pane--table2 td {
  width: auto;
  min-width: 160px;
}
.pane--table2 tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  display: block;
  height: 200px;
}
.pane--table2 thead {
    display: table-row;
}
.mt-4 {
  margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<h3>Example 1: Two-Table Structure</h3>
<div id="maintalbe" class="pane pane--table1">
  <div class="pane-hScroll">

    <table>
      <thead>
        <th>foo</th><th>foo</th><th>foo</th><th>foo</th>
      </thead>
    </table>

    <div class="pane-vScroll">
      <table>
        <tbody>
          <tr><td>1</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>2</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>3</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>4</td><td>foo foo foo foo foo foo foo foo foo foo foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>5</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>6</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>7</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>8</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>9</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>10</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>11</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>12</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>13</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>14</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>15</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>16</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>17</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>18</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>19</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>20</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>21</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>22</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>23</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>24</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>25</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>26</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>27</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>29</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>30</td><td>foo</td><td>foo</td><td>foo</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<h3 class="mt-4">Example 2: Two-Table Structure</h3>
<div class="pane pane--table1">
  <div class="pane-hScroll">

    <table>
      <thead>
        <th>foo</th><th>foo</th><th>foo</th><th>foo</th>
      </thead>
    </table>

    <div class="pane-vScroll">
      <table>
        <tbody>
          <tr><td>1</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>2</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>3</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>4</td><td>foo foo foo foo foo foo foo foo foo foo foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>5</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>6</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>7</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>8</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>9</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>10</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>11</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>12</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>13</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>14</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>15</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>16</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>17</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>18</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>19</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>20</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>21</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>22</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>23</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>24</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>25</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>26</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>27</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>29</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>30</td><td>foo</td><td>foo</td><td>foo</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

最佳答案

问题是因为在 scroll 事件处理程序中您选择了 all .pane-vScroll 和 .pane-hScroll 元素，而不仅仅是与当前正在滚动的表格相关的元素。

要解决此问题，请使用 this 关键字来引用引发滚动事件的元素，然后从中遍历 DOM 以查找相关元素并仅设置它们的属性。试试这个:

$('.pane .pane-hScroll').scroll(function() {
  var vScrollWidth = $(this).width() + $(this).scrollLeft();
  $(this).find('.pane-vScroll').width(vScrollWidth);
});

完整示例:

$('.pane .pane-hScroll').scroll(function() {
  var vScrollWidth = $(this).width() + $(this).scrollLeft();
  $(this).find('.pane-vScroll').width(vScrollWidth);
});
* {
  box-sizing: border-box;
}

body {
  font: 14px/1 Arial, sans-serif;
}

table {
  border-collapse: collapse;
  background: white;
  table-layout: fixed;
  width: 100%;
}

th,
td {
  padding: 8px 16px;
  border: 1px solid #ddd;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane {
  background: #eee;
}

.pane-hScroll {
  overflow: auto;
  width: 400px;
  background: green;
}

.pane-vScroll {
  overflow-y: auto;
  overflow-x: hidden;
  height: 200px;
  background: red;
}

.pane--table2 {
  width: 400px;
  overflow-x: scroll;
}

.pane--table2 th,
.pane--table2 td {
  width: auto;
  min-width: 160px;
}

.pane--table2 tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  display: block;
  height: 200px;
}

.pane--table2 thead {
  display: table-row;
}

.mt-4 {
  margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<h3>Example 1: Two-Table Structure</h3>
<div class="pane pane--table1">
  <div class="pane-hScroll">
    <table>
      <thead>
        <th>foo</th>
        <th>foo</th>
        <th>foo</th>
        <th>foo</th>
      </thead>
    </table>
    <div class="pane-vScroll">
      <table>
        <tbody>
          <tr>
            <td>1</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>3</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>4</td>
            <td>foo foo foo foo foo foo foo foo foo foo foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>5</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>6</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>7</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>8</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>9</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>10</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>11</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>12</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>13</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>14</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>15</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>16</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>17</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>18</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>19</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>20</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>21</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>22</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>23</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>24</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>25</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>26</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>27</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>28</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>28</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>29</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>30</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<h3 class="mt-4">Example 2: Two-Table Structure</h3>
<div class="pane pane--table1">
  <div class="pane-hScroll">
    <table>
      <thead>
        <th>foo</th>
        <th>foo</th>
        <th>foo</th>
        <th>foo</th>
      </thead>
    </table>
    <div class="pane-vScroll">
      <table>
        <tbody>
          <tr>
            <td>1</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>3</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>4</td>
            <td>foo foo foo foo foo foo foo foo foo foo foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>5</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>6</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>7</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>8</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>9</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>10</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>11</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>12</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>13</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>14</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>15</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>16</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>17</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>18</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>19</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>20</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>21</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>22</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>23</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>24</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>25</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>26</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>27</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>28</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>28</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>29</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>30</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

关于javascript - 固定标题表在水平滚动时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57430544/

上一篇：javascript - 配置 Jest 以支持 Typescript (NodeJs)

下一篇：javascript - 如何使用 io-ts 验证数组长度？

相关文章：

javascript - Youtube iframe api a.u() 不是函数

javascript - 我可以关注动态加载的 AJAX 元素吗？

javascript - 我在将 javascript 文件应用到 Wordpress 时遇到问题。如何入队脚本？

jquery - 使用 jquery 隐藏表的列/td

javascript - 如何从输入类型 ="text"的附加文件中获取名称和扩展名

javascript - Angular 4 - 将数据传递到组件中

javascript - 更改 CSS 的颜色处理程序

php - 使用php将图像添加到mysql

javascript - 如何摆脱控制台警告 "enableRowSelect has been deprecated... Please use rowSelection instead."“

jquery - 通过单击另一个更改元素 z-index

©2024 IT工具网  联系我们