2017-03-25 9 views
0

スクロールバーの位置に応じてスクロールできるテーブルエッジにわずかな影を追加するスクリプトがありますが、時にはうまくいきません。テーブルスクロールバーの位置を計算する問題

これはそれの一部である:。

$('table').on('scrollstart scrollstop', function(){ 
    if($(this).parent().hasClass('table-wrap')){ 
     var elem = $(this), 
     elemBody = elem.find('tbody'), 
     elemParent = elem.parent('.table-wrap'); 
     var scrolled = (elemBody.outerWidth() - elemParent.outerWidth() - elem.scrollLeft()); 
     if(scrolled === 0){ 
     elemParent.addClass('left_active'); 
     elemParent.removeClass('right_active'); 
     } else if(elem.scrollLeft() === 0) { 
     elemParent.removeClass('left_active'); 
     elemParent.addClass('right_active'); 
     } else { 
     elemParent.addClass('left_active'); 
     elemParent.addClass('right_active'); 
     } 
    } 
    }); 

この部分時々私は--- elem.scrollLeft() --here」に "+1" を追加する必要があります)、それを動作させるために

しかし、その後、私は、それが役立ちますいくつかのテーブルに気づき、他の人に、それ;( elem.scrollLeft() - - elemParent.outerWidth()elemBody.outerWidth())

varが=をスクロール動作を停止します。私が右にスクロールすると、 'right_active'クラスは消えません。

提案がありますか?

+0

作業するにはjsfiddleを提供できますか? – Sandwell

答えて

0

var scrolledの計算にスクロールバーの幅を含めようとしましたか?

var scrolled = (elemBody.outerWidth() - elemParent.outerWidth() - elem.scrollLeft()); 

私はあなたが正しい軌道に乗っていると思いますが、.outerWidth()は、スクロールバーの幅を含んでいないので、幅はおそらく正確ではありません。したがって、最大スクロール幅は常に実際の要素幅よりも大きくなります。