jQuery onclick將X向右滾動

Question

希望我可以清楚地解釋這一點。我有一些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然後隱藏溢出：隱藏。

我想弄清楚如何使用戶點擊a.go右鍵時，它向右滾動表格900px（顯示最初隱藏的附加表格列）。

但我也不想「900px」是數字，而不是我想它要滾動的像素X個向右，其中x =的當前寬度div.overflow隱藏

有什麼建議嗎？

Answer 1

這是朝着正確方向邁出的一步：

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> 

JavaScript來使DIV滾動每次點擊a標籤時50個像素：

$('a.go-right').click(function() { 
    var pos = $('div.overflow-hidden').scrollLeft() + 50; 
    $('div.overflow-hidden').scrollLeft(pos); 
}); 

css使div更明顯'n等：

table td{ 
    border: 1px solid black; 
} 

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

table { 
    width: 900px; 
} 

這裏的鏈接到舊小提琴：Click Here

編輯：新的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'); 
}); 

Answer 2

$('.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變量，如Waffle Whomper所解釋的。最後，I animate() scrollLeft與pos變量，所有這些變量均座標，因此單擊.go-right錨點將將.overflow隱藏的內容移到左側，模擬滾動。