如何使用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

您可以在javascript中使用element.scrollLeft = 30px方法。因此，例如，如果您的表格的ID是“表格”，您可以说：

table = document.getElementById("table")
function scroll_right(){
    table.scrollLeft = 30px
}

然后如果你想在html中有一个向右滚动的按钮：

<button onclick="scroll_right">Scroll right</button>

Answer 2

点击向右滚动到右边，然后点击向左滚动..这是一个如何工作的想法。欢呼声。

$(".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>