javascript - 如何使用js，jquery移动表格滚动条？

Question

我有一个带有水平滚动条的表格，如下所示。

 <table >
    <tr>
        <th>Col1</th>
        <th>col2</th>
        <th>col3</th>
        <th>col4</th>
        <th>col5</th>
        <th>col5</th>
    </tr>
</table>

有没有办法使用 javascript(dynamicaly) 移动滚动条。例如，我想在单击按钮时将滚动条向右移动 30px。

Answer 1

点击右侧向右滚动，点击左侧向后滚动。这就是它的工作原理。干杯。

$(".leftArrow").click(function () { 
  var leftPos = $('.wrapper').scrollLeft();
  $(".wrapper").animate({scrollLeft: leftPos - 30}, 100);
});

$(".rightArrow").click(function () { 
  var leftPos = $('.wrapper').scrollLeft();
  $(".wrapper").animate({scrollLeft: leftPos + 30}, 100);
});

.wrapper {
  width:100px;
  overflow-x: scroll;
  overflow-y: hidden;
}

table {
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <table>
    <tr>
      <th>Col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
      <th>col5</th>
      <th>col5</th>
    </tr>
  </table>
</div>

<button class="leftArrow">Scroll left</button>

<button class="rightArrow">Scroll right</button>