向UI網格添加滾動條覆蓋底部行

Question

我正在處理的應用程序在頁面上有一個ui-grid。最近，我們在網格中添加了一個水平滾動條，並啓用了「固定」，以便在網格水平滾動時可以凍結某些列。

我注意到的一個奇怪的行爲是新添加的滾動條覆蓋表中的最後一行。有沒有其他人曾經體驗過這一點，如果是的話，想出瞭如何阻止它發生？我嘗試了所有我能想到的（即改變行高，動態調整網格大小等），但沒有任何工作。我希望別人能夠克服這個問題，並告訴我他們是如何做到的。

Answer 1

嗯，我找到了一種方法來解決這個問題，但它特別是如何創建我們的網格。

我們所有具有水平滾動的網格都固定了前三列。我使用下面的代碼來查看所討論的網格是否具有用於固定的網格選項。如果網格是scrollable，我只需將網格的高度加15。這使得網格更大，因此在沒有覆蓋底部行的情況下，滾動條有足夠的空間。

var scrollbarOffset = 15; 
var buffer = 5; 
var gridHeight = ((rowCount > 0 ? rowCount : 1) * rowHeight) + footer + header + filter + buffer; 
var scrollable= $.grep(element[0].attributes, 
function (rn) { 
       return rn.nodeName === "ui-grid-pinning"; 
       }).length > 0; 

if (scrollable) { 
    gridHeight = gridHeight + scrollbarOffset; 
}