角度UIグリッドでスクロールバーを制御する方法

Question

私は、プロジェクトで角度UIグリッドを使用しています。グリッドは、すべての列がdivに水平に収まるようにサイズが変更されます。

これは、1つの画面に収まるよりも多くの行があるまでうまくいきます。次に、最後の列の一部（不良）をカバーする垂直スクロールバーが表示されます（良好）。水平スクロールバーを有効にすると、最後の20ページ程度のピクセルに到達できますが、水平方向にスクロールすると、ヘッダーセルはスクロールしません。これにより、すべてが整列しなくなります。

グリッドがスクロールバーの前に完全にサイズ設定されているため、水平スクロールバーは必要ありません。しかし、スクロールバーがコンテンツをカバーする方法では、スクロールバーがなければ、20またはそれ以上の右側にあるものは見えません。

これを修正する必要があります。ここで私は実装に見ているいくつかの解決策が失敗し、以下のとおりです。

1. は、垂直スクロールバーがあるかどうかを知るためにいくつかの方法を見つけて、ヘッダーセルおよびデータセルの両方の内容にプッシュするためにどこかにパディングやマージンを追加します物事を一直線に保つ私はスクロールバーを持っているかもしれないし、持っていないかもしれないコンテナをつかむための簡単な方法を見つけていないし、それがスクロールバーを持っている場合それを求めるロジックが脆いだろうと思う。さらに、パディングを追加するだけで遊んでいけば、効果的にコンテンツをプッシュしないと思っていました。
2. スクロールバーがあるコンテナに、スクロールバーがあるときにグリッドの外側に押し出す方法を見つけます。これは基本的に男がかなり滑りやすいという点で＃1と同じ問題です。
3. スクロールバーを自分で置き換える方法を見つける。特定のライブラリでこれを行うことができるブランチを行った人がいるようですが、私たちはUI Gridの特定のコミットに縛られており、ライブラリを追加することは議会の行為を取ります。

考えられますか？

Answer 1

垂直スクロールバーがあるかどうかを確認する方法 rowTemplateで行をカスタマイズしていない場合は、rowHeightが30px（検査しない場合）です。

var dataRowHeight = (numberOfRows * 30) + padding (if you have); 
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight; 

if (dataRowHeight > gridElementHeight) { 
    // you have a verticalscrollbar 
} 

• 安全側：％で、すべての列の幅を指定してスクロールバーの後ろに1％を残します。
• 醜い側：上記の手法を使って垂直スクロールバーを検出した場合、 'viewport'の幅を取得し、ループスルーして、実際のピクセルをすべての列に対して指定した割合から計算し、15ピクセル後ろにします。