Here's your code with some adjustments with a table of 50 entries to scroll through. See how buttonHeight (the height of a single row button) is used by FauxScrollFrame to calulate the offset of the thumb position in the bar and used in OnVerticalScroll to calculate back to an offset row in your data table for the update functions starting position.
I calculated the buttonHeight based on fitting 7 rows into the height of your ScrollFrame.
I moved the frames to UIParent so, move the back where you want.
Lua Code:
local buttonHeight
local data = {}
for i=1, 50 do
tinsert(data, { value = random(1, 500), display = i })
end
local function updateScrollFrame(self)
local rowHeight = buttonHeight
local totalEntries = #data
local filled, index, row, rowData = 0
local offset = self.Offset or 0 -- the data row to start at (caculated at OnVertivalScroll or zero)
local rows, rowHeight = #self.buttons, self.buttons[1]:GetHeight()
for i=1, totalEntries do -- Fill the 7 rows and show the row button
index = offset + i
rowData = data[index]
if rowData then
filled = filled + 1
row = self.buttons[i]
row:SetText(format("Data Row %d (%d)", rowData.display, rowData.value))
row.index = index
row:Show()
if i == rows then
break
end
end
end
if filled < rows then -- hide any non-filled button (probably not neede for a simple FauxScrollFrame but...
for i = filled + 1, rows do
self.buttons[i]:Hide()
end
end
FauxScrollFrame_Update(self, totalEntries, rows, rowHeight) -- Update the scrollbar
end
local TestScrollFrame = CreateFrame("Frame", "TestScrollFrame", UIParent, "ChatConfigBoxTemplate")
TestScrollFrame:SetSize(500, 150)
-- TestScrollFrame:SetPoint("TOPLEFT", TestInterfaceFrame, "BOTTOMLEFT")
TestScrollFrame:SetPoint("CENTER")
local TestScrollFrame =
CreateFrame("ScrollFrame", "TestScrollFrame", TestScrollFrame, "FauxScrollFrameTemplate")
TestScrollFrame:SetPoint("TOPLEFT", 0, 0)
TestScrollFrame:SetPoint("BOTTOMRIGHT", -25, 0)
buttonHeight = TestScrollFrame:GetHeight() / 7 -- so you know the height of a button
TestScrollFrame:SetScript(
"OnVerticalScroll",
function(self, offset) -- offset is based on the height of the scrollbar / the height of a row button see: FauxScrollFrame_Update
self.Offset = math.floor(offset / buttonHeight) -- calulate offset back to the data row to start at
updateScrollFrame(self)
end
)
TestScrollFrame.buttons = {}
for index = 1, 7 do
TestScrollFrame.buttons[index] =
CreateFrame("Button", "$parentbtn" .. index, TestScrollFrame, "OptionsListButtonTemplate")
local button = TestScrollFrame.buttons[index]
button:SetID(index)
button:SetSize(TestScrollFrame:GetWidth() - 50, buttonHeight)
if index == 1 then
button:SetPoint("TOPLEFT", 8, 0)
else
button:SetPoint("TOPLEFT", TestScrollFrame.buttons[index - 1], "BOTTOMLEFT")
end
button:SetScript(
"OnClick",
function(self, button)
if button == "RightButton" then
print("Button:", self:GetID(), "Value:", data[self.index].value)
-- updateScrollFrame()
end
end
)
end
updateScrollFrame(TestScrollFrame) -- Get Started (no offset so updateScrollFrame will start a zero
As an aside, FauxScrollFrame has been deprecated but I don't expect it will go away any time soon but you may want to consider updating or replacing the Faux... methods with your own at some point.