如何控制Angular UI Grid中的滾動條

Question

我在項目中使用Angular UI Grid。網格大小本身，以便所有的列在div中水平放置。

這很好，直到有更多的行比在一個屏幕上適合。然後，一個垂直滾動條出現（好），它覆蓋了最後一列（壞）的一部分。可以啓用水平滾動條以達到最後20個像素左右，但是當您水平滾動時，標題單元格不會滾動。這會拋出一切不對齊。

由於網格在滾動條之前大小完美，所以不需要水平滾動條。但滾動條覆蓋內容的方式意味着如果沒有它，你看不到任何可能在右邊20左右的內容。

我需要解決這個問題。這裏有一些解決方案，我已經調查落實，不成功：

1. 找到某種方式來知道是否有一個垂直滾動條，並添加填充或利潤率介於這兩個標題單元格和數據單元格的內容推，讓事情保持一致。我還沒有找到一個簡單的方法來抓住可能有或沒有滾動條的容器，然後我想如果它有一個滾動條問它的邏輯將變得脆弱。另外，只是在我認爲應該去的地方添加填充，並沒有有效地推動內容。
2. 找到一種方法，讓具有滾動條的容器在具有滾動條時推出網格外部。這個問題和第一個問題基本相同，那個人很滑。
3. 找到一種方法來替換我自己的滾動條。似乎有人做了一個分支，可以讓你使用特定的庫來做到這一點，但是我們被綁定到一個特定的UI Grid，並且添加庫需要一個國會的行爲。

的思考？

Answer 1

如何知道是否有垂直滾動條： 如果您沒有使用rowTemplate自定義行，那麼您可能會有30px的rowHeight（如果沒有請檢查）。

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％，背後的滾動條。
• 醜陋的一面：如果使用上述技術檢測到垂直滾動條，則留下15px，獲取「視口」的寬度，循環瀏覽並計算您提供的所有列的百分比中的實際像素。