Short guide on how to use the druid scroll component

The Defoldmine
#1

Hi,
so after some struggle I have finally understood how the druid scroll component works and I am going to share it here in case someone struggles like me.

  1. You need 2 gui box nodes : one that will act as a view window and one that will act as container for your content.

  2. The content node must be the child of the window node:
    image

  3. Give the content node a height or width(depending on if you want vertical of horizontal scrolling) that is bigger than the view window size:
    image
    In this screenshot, the Y value of the content node size has been set to 1000, while the Y value of the view window size has been left to 100.

  4. Set the Clipping Mode of the view window node to Stencil, so that everything that is outside of the view window will be cut and become invisible:
    image

  5. Add any content that you want inside the content node:
    image

  6. In your gui script, make references to your 2 nodes and then create the actual druid scroll component:

local scrollWindow = gui.get_node("ScrollWindow")
local scrollContent = gui.get_node("ScrollContent")
self.druidScrollComponent = self.druid:new_scroll(scrollWindow, scrollContent)
    :set_extra_stretch_size(0)
    :set_inert(false)
    :set_horizontal_scroll(false)

Like in this example, you can specify if you want horizontal or vertical scrolling or both and many other available options.

  1. Set the total size of the scrolling so that users won’t be able to scroll below your content where there is nothing to see:
self.druidScrollComponent :set_size(vmath.vector3(0,  totalSize , 0), vmath.vector3(0))

Here totalSize corresponds to the position of the last content item in a vertical scrolling situation. This is especially useful if your content is dynamic and you don’t know the total size in advance.

If you see errors or something is missing, don’t hesitate!

Link to the druid scroll API: Defold Druid UI Library

13 Likes
#2

Thanks for this!

I have the small note about this line:

local scrollWindow = gui.get_node("ScrollWindow")
local scrollContent = gui.get_node("ScrollContent")
self.druidScrollComponent = self.druid:new_scroll(scrollWindow, scrollContent)

In all Druid components you able to pass the node name instead of the node instance

Example:

self.druidScrollComponent = self.druid:new_scroll("ScrollWindow", "ScrollContent")
7 Likes
#3

Thanks for the article! It was helpful.
Can you provide a formula for the totalSize variable in case of static content, please?

2 Likes
#4

If you are using the StaticGrid component, they have the get_size function (Defold Druid UI Framework)

Also you can bind the scroll to the grid directly to auto-update scroll size depends on your action with grids: Defold Druid UI Framework

2 Likes
#6

I want to integrate slider with scroll, the slider works with the scroll but while moving slider the scroll doesn’t respond. What’s the issue?

    local scrollbar_slider = self.druid:new_slider("scoreboard/slider_tab", vmath.vector3(0, -302, 0), function(_, value) 
    		scroll_window:scroll_to_percent(vmath.vector3(0, value, 0), true)
    	end)
    		scroll_window.on_scroll:subscribe(function(_, point)
    		scrollbar_slider:set(1 - scroll_window:get_percent().y, false)
    	end)
#7

My scroll component cannot scroll all the way to the bottom.
The last box is only showing half.

image
image551×544 364 Bytes

1 Like