現在のビューポート内のテーブルの境界（エンドポイント）を見つける方法は？

Question

私の要件は、テーブルの幅が現在のビューポートよりも大きい場合、左右の2つのボタンを追加する必要があります。ユーザが左ボタンをクリックすると、同様に左に移動する必要があります。

私は要件を完了するためにjQueryのアニメーションメソッドに決めました。ここでの私の挑戦は、私は左の境界線が好きかもしれませんが、右の境界線は好きではありません。あなたのビューとポイントを教えてください

var width = window.innerWidth || document.documentElement.clientWidth|| document.body.clientWidth; 

var tableWidth = jQuery("table").width(); 

var annimwidth = tableWidth - width; 

jQuery(".leftButton").on("click", function()){ 

$("table").animate({ 
    marginLeft: '-='+annimwidth+'px' 
}); 
if(jQuery("table").css("margin-left")==0){ 
disable the left button 
} 
} 

同様に右側を無効にする方法。

右側余白プロパティはテーブルの幅に応じて異なります。マージンプロパティは正しい方法ではありません。

右のボタンを停止または無効にする方法を教えてください

Answer 1

境界を見つける必要はありません。左または右の矢印を押すたびに小さなscrollLeftアニメーションを行うだけです。

このような何か：

function scrollH() { 
    if (this.className == 'left') 
    $('.viewport').animate({ 
     scrollLeft: "-=" + 50 
    }, 150); 
    else 
    $('.viewport').animate({ 
     scrollLeft: "+=" + 50 
    }, 150); 

} 

要素がすでにその辺のjQueryが何をアニメーションではないだろうにスクロールされた場合。

私は概念を示すために少しフィドルを作った。 https://jsfiddle.net/z5vgq3hr/37/

あなたに適しているかどうかを教えてください。