jQuery onclick向右滚动X

希望我能解释清楚。我有一些类似这样的HTML：

<a href="#" class="go-right">Go Right</a>
<div class="overflow-hidden">
  <table>
    <tr>
      <td>This is content</td>
    </tr>
    <tr>
      <td>This is content</td>
    </tr>
    <tr>
      <td>etc.</td>
    </tr>
  </table>
</div>

这就是内容
这就是内容
等

这张表以时间表的形式显示表演，这样人们就可以很容易地看到我参加的某个节日的表演。表格本身是动态的，并且往往是8000像素左右宽。div.overflow-hidden是响应性的，因此为了便于理解，我们假设我们在一个屏幕上查看它，该屏幕允许它的宽度为900px。然后，表的额外7100px将使用overflow:hidden隐藏

我想弄清楚如何使它在用户单击a.go-right按钮时向右滚动表900px（显示最初隐藏的其他表列）

但我也不希望“900px”是数字，而是希望它向右滚动X个像素，其中X=div.overflow-hidden的当前宽度

---

有什么想法吗？

这是朝着正确方向迈出的一步：

与您的html完全相同：

<a href="#" class="go-right">Go Right</a>
<div class="overflow-hidden">
  <table>
    <tr>
      <td>This is content. Yep. Sweet, huh? awwww yeah that's what i thought. Just here for appearances... fyi. And still goin woot woot.</td>
    </tr>
    <tr>
      <td>This is content</td>
    </tr>
    <tr>
      <td>etc.</td>
    </tr>
  </table>
</div>

css使div更加明显，例如：

table td{
    border: 1px solid black;
}

div  {
    border: 2px solid green;
    width: 200px;
    height:100px;
    overflow: hidden;
}

table {
    width: 900px;
}

以下是旧小提琴的链接：

编辑：如您所述，新的javascript函数适用于您：

$('.go-right').click(function() {
    var far = $( 'div.overflow-hidden' ).width();
    var pos = $('div.overflow-hidden').scrollLeft() + far;
    $('div.overflow-hidden').animate( { scrollLeft: pos }, 1000, 'easeOutQuad' );
});

---

这是朝着正确方向迈出的一步：

与您的html完全相同：

<a href="#" class="go-right">Go Right</a>
<div class="overflow-hidden">
  <table>
    <tr>
      <td>This is content. Yep. Sweet, huh? awwww yeah that's what i thought. Just here for appearances... fyi. And still goin woot woot.</td>
    </tr>
    <tr>
      <td>This is content</td>
    </tr>
    <tr>
      <td>etc.</td>
    </tr>
  </table>
</div>

css使div更加明显，例如：

table td{
    border: 1px solid black;
}

div  {
    border: 2px solid green;
    width: 200px;
    height:100px;
    overflow: hidden;
}

table {
    width: 900px;
}

以下是旧小提琴的链接：

编辑：如您所述，新的javascript函数适用于您：

$('.go-right').click(function() {
    var far = $( 'div.overflow-hidden' ).width();
    var pos = $('div.overflow-hidden').scrollLeft() + far;
    $('div.overflow-hidden').animate( { scrollLeft: pos }, 1000, 'easeOutQuad' );
});

因此，

far

变量使用

width（）

获取

div.overflow-hidden

的当前宽度。接下来，我们设置

pos

变量，如华夫格·旺珀所述。最后，我使用

pos

变量将scroll向左移动

animate（）

因此，
far
变量使用
width（）
获取
div.overflow-hidden
的当前宽度。接下来，我们设置
pos
变量，如华夫格·旺珀所述。最后，我
animate（）
使用
pos
变量将滚动条向左移动，所有这些都使我坐在那里，因此单击.go right锚点会将.overflow中的内容隐藏到左侧，模拟一个滚动条。
太好了，这使我的方向正确。我最后的代码是这样的（包括获取溢出隐藏元素的宽度，并添加一点动画以使发生的事情更加明显）。。。哦，等等，我想我不能在这里发布代码。我会创建一个新的答案，但是如果你编辑你的答案来反映我的答案，我会将它标记为正确的，因为你给了我足够的魅力来把所有的答案组合在一起。谢谢你，老兄！我很高兴这有帮助。我刚刚把你的js代码贴到了我的函数所在的地方。太好了，这让我找到了正确的方向。我最后的代码是这样的（包括获取溢出隐藏元素的宽度，并添加一点动画以使发生的事情更加明显）。。。哦，等等，我想我不能在这里发布代码。我会创建一个新的答案，但是如果你编辑你的答案来反映我的答案，我会将它标记为正确的，因为你给了我足够的魅力来把所有的答案组合在一起。谢谢你，老兄！我很高兴这有帮助。我刚刚在函数所在的位置发布了你的js代码。标记在lqp队列中。你能把它格式化并解释一下它是如何回答这个问题的吗？谢谢。您必须删除lqp队列中滞后的jQuery 3.2的
easeOutQuad
。你能把它格式化并解释一下它是如何回答这个问题的吗？谢谢。您必须删除jQuery 3.2的
easeOutQuad