Scrolling down

Solar2D General Questions/Discussion
1

I am trying to create a social app like TikTok or Instagram. When the user tries to scroll up or down I want them to go up or down. I have some code I got from the docs but it doesn’t work. It prints in the console that the scroll view was touched but nothing else happens.

So how can I scroll up or down with my app when the user tries too ?

-- ScrollView listener
local function scrollListener( event )
 
    local phase = event.phase
    if ( phase == "began" ) then print( "Scroll view was touched" )
    elseif ( phase == "moved" ) then print( "Scroll view was moved" )
    elseif ( phase == "ended" ) then print( "Scroll view was released" )
    end
 
    -- In the event a scroll limit is reached...
    if ( event.limitReached ) then
        if ( event.direction == "up" ) then print( "Reached bottom limit" )
        elseif ( event.direction == "down" ) then print( "Reached top limit" )
        elseif ( event.direction == "left" ) then print( "Reached right limit" )
        elseif ( event.direction == "right" ) then print( "Reached left limit" )
        end
    end
 
    return true
end

-- Create the widget
local scrollView = widget.newScrollView(
    {
        top = 100,
        left = 10,
        width = 300,
        height = 400,
        scrollWidth = 600,
        scrollHeight = 800,
        listener = scrollListener
    }
)
2

If your using this exact code, then i assume that the background of the scroll view is white?

It actually is moving. You just cant see it.
Insert an image into the scroll view first.

Look at the same documentation:

local widget = require( “widget” )

– ScrollView listener
local function scrollListener( event )

local phase = event.phase
if ( phase == "began" ) then print( "Scroll view was touched" )
elseif ( phase == "moved" ) then print( "Scroll view was moved" )
elseif ( phase == "ended" ) then print( "Scroll view was released" )
end

-- In the event a scroll limit is reached...
if ( event.limitReached ) then
    if ( event.direction == "up" ) then print( "Reached bottom limit" )
    elseif ( event.direction == "down" ) then print( "Reached top limit" )
    elseif ( event.direction == "left" ) then print( "Reached right limit" )
    elseif ( event.direction == "right" ) then print( "Reached left limit" )
    end
end

return true

end

– Create the widget
local scrollView = widget.newScrollView(
{
top = 100,
left = 10,
width = 300,
height = 400,
scrollWidth = 600,
scrollHeight = 800,
listener = scrollListener
}
)

– Create a image and insert it into the scroll view
local background = display.newImageRect( “assets/scrollimage.png”, 768, 1024 )
scrollView:insert( background )

1 Like
3

Ok I see it but it only goes up to a certain point then returns to the top. I want it to continuously scroll down.

Edit:

I got it working thanks. But how do I make the image fit the whole screen ?

Never mind I got it.

1 Like
4

(
Just in case: you can change the size of the scrollable part of the scroll view with methods scrollView:setScrollWidth(newWidth) scrollView:setScrollHeight(newHeight)
)

when you insert an image into the scroll view, the size of the scrollable view AUTOMATICALLY changes.
So, if you insert an image that has background.width = 1000 and background.height = 700, the width and the height of the part of the scroll view that is scrollable also changes to that! So you already have the right size.

Now you just need to position the image correctly in the scrollview.

try this:

local background = display.newImageRect( “assets/scrollimage.png”, 768, 1024 )
scrollView:insert( background )

background.x = background.width / 2
background.y = background.height / 2

This should make the image fit the whole scroll view(i think this is what you meant).

Did it work?

Edit: just saw you already figured it out :smiley:

1 Like