Fix over scroll

[Walkerbo]

Hi all

I have a bear-bones scroll set up that is over-scrolling past the last data button.


Here is my code:

local function updateScrollFrame()
    FauxScrollFrame_Update(
        TestScrollFrame,
        #TestData,
        7,
        20
    )
    for index = 1, 7 do
        local offset = index + FauxScrollFrame_GetOffset(TestScrollFrame)
        local button = TestScrollFrame.buttons[index]
        button:SetNormalFontObject(NumberFontNormalLargeYellow)
        button:SetHighlightFontObject(NumberFontNormalLargeYellow)
        button.index = offset
        if offset <= #TestData then
            button:SetText(TestData[offset])
            button:Show()
        else
            button:Hide()
        end
    end
end
 
local TestScrollFrame = CreateFrame("Frame", "TestScrollFrame", TestInterfaceFrame, "ChatConfigBoxTemplate")
TestScrollFrame:SetSize(500, 150)
TestScrollFrame:SetPoint("TOPLEFT", TestInterfaceFrame, "BOTTOMLEFT")
 
local TestScrollFrame =
    CreateFrame("ScrollFrame", "TestScrollFrame", TestScrollFrame, "FauxScrollFrameTemplate")
TestScrollFrame:SetPoint("TOPLEFT", 0, -8)
TestScrollFrame:SetPoint("BOTTOMRIGHT", -30, 8)
TestScrollFrame:SetScript(
    "OnVerticalScroll",
    function(self, offset)
        FauxScrollFrame_OnVerticalScroll(self, offset, 7, updateScrollFrame)
    end
)
 
TestScrollFrame.buttons = {}
for index = 1, 7 do
    TestScrollFrame.buttons[index] =
        CreateFrame("Button", "$parentbtn" .. index, TestScrollFrame, "OptionsListButtonTemplate")
    local button = TestScrollFrame.buttons[index]
    button:SetSize(500, 20)
    button:SetPoint("TOPLEFT", 8, -(index - 1) * 20 - 8)
    button:SetScript(
        "OnClick",
        function(self, button)
            if button == "RightButton" then
                print(TestData, self.index)
                updateScrollFrame()
            end
        end
    )
end

How do I solve the over-scrolling issue?

[Fizzlemizz]

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.

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.

[Walkerbo]

Hi Fizzlemizz

Thanks for your code, it works perfectly; I will have to frankenstein it to meet my needs.

When you say "You may want to consider updating or replacing the Faux... methods with your own at some point." how would I do such a thing?

I am still a novice when it comes to coding.

[Fizzlemizz]

An example by MeoRaw on the new ScrollList interface that replaces FauxScroll and I believe HybridScroll can be found Here.

As I said, probably not an immediate need but something to keep in mind if the time comes.

[Fizzlemizz]

A page on making Scrollable Frames was added to the wiki yesterday. It doesn't have everything but will hopefully grow and improve over time.

[Xrystal]

Cool, quite different to how it worked before so will be handy to know it works now for when I may need it in the future.