javascript - 阻止垂直滚动但允许水平滚动

Question

我目前有一个带有日景的小议程

当我的动态表开始有很多<td>时的，出现水平滚动条，但是当用户向右滚动时，他不再能够看到他实际选择的时间。我创建了一个小示例，如代码片段所示。

#container{
  width: 400px;
  height:250px;
  border:1px solid black;
  overflow-x:auto;
  white-space:nowrap;
  position:relative;
}

table{
  border:1px solid black;
  border-collapse:collapse;
}


table th{
  padding: 8px;
  border: 1px solid #ddd;
  margin:0;
  display:block;
}

table td{
  padding: 8px;
  border: 1px solid #ddd;
  min-width: 150px;
  min-height: 18px;
  display:inline-block;
}

table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}

.secondTable{
  border-left: none !important;
}

.firstTableCon{
  margin-left:100px;
  margin-top:50px;
  position:relative;
  
}

.tableContainer{
  display:inline-block;
}

#absoluteContainer{
  /* position:absolute; */
}

#timeTable{
  /* position:fixed; */
}

<div id="container">
  <div class="tableContainer firstTableCon">
    <div id="absoluteContainer">
      <table id="timeTable">
        <tr>
          <th>
            8:00
          </th>
        </tr>
        <tr>
          <th>
            9:00
          </th>
        </tr>
        <tr>
          <th>
            10:00
          </th>
        </tr>
        <tr>
          <th>
            11:00
          </th>
        </tr>
        <tr>
          <th>
            12:00
          </th>
        </tr>
        <tr>
          <th>
            13:00
          </th>
        </tr>
        <tr>
          <th>
            14:00
          </th>
        </tr>
        <tr>
          <th style="border:0px;">
            15:00
          </th>
        </tr>
      </table>
    </div>
  </div>
  <div class="tableContainer">
    <table class="secondTable">
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td style="border:0px;">

        </td>
      </tr>
    </table>
  </div>

</div>

我希望表格能够显示您选择的时间(垂直表格)，以便屏幕向右滚动，但在向上或向下滚动时保持位置不变。

最好使用 css 解决方案，但如果 Javascript 是唯一的选择，我将被迫使用它。

在这被标记为重复之前，我已经看到了另一个问题 Here并尝试了 fiddle ，但它们没有按照我想要的方式工作

Answer 1

在这种情况下，您可能需要在 .firstTableCon 上使用 position: Sticky 和 left: 0:

#container{
  width: 400px;
  height:250px;
  border:1px solid black;
  overflow-x:auto;
  white-space:nowrap;
  position:relative;
}

table{
  border:1px solid black;
  border-collapse:collapse;
}


table th{
  padding: 8px;
  border: 1px solid #ddd;
  margin:0;
  display:block;
}

table td{
  padding: 8px;
  border: 1px solid #ddd;
  min-width: 150px;
  min-height: 18px;
  display:inline-block;
}

table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}

.secondTable{
  border-left: none !important;
}

.firstTableCon{
  margin-left:100px;
  margin-top:50px;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}

.tableContainer{
  display:inline-block;
}

#absoluteContainer{
  /* position:absolute; */
}

#timeTable{
  /* position:fixed; */
}

<div id="container">
  <div class="tableContainer firstTableCon">
    <div id="absoluteContainer">
      <table id="timeTable">
        <tr>
          <th>
            8:00
          </th>
        </tr>
        <tr>
          <th>
            9:00
          </th>
        </tr>
        <tr>
          <th>
            10:00
          </th>
        </tr>
        <tr>
          <th>
            11:00
          </th>
        </tr>
        <tr>
          <th>
            12:00
          </th>
        </tr>
        <tr>
          <th>
            13:00
          </th>
        </tr>
        <tr>
          <th>
            14:00
          </th>
        </tr>
        <tr>
          <th style="border:0px;">
            15:00
          </th>
        </tr>
      </table>
    </div>
  </div>
  <div class="tableContainer">
    <table class="secondTable">
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>

        </td>
        <td>

        </td>
        <td style="border:0px;">

        </td>
      </tr>
    </table>
  </div>

</div>