ScrollHandler: Handle the scroll of Scroll Views

1. Introduction

ScrollHandler extension can be used to handle the scroll and properties of scroll views. It can effortlessly manage and customize the scrolling experience and properties of Vertical and Horizontal scroll arrangements.
Latest Version: 1.4
Released:  August 14, 2020
Last Updated:  June 27, 2023

2. Blocks

3. Documentation

HReachLeftEvent raised when HSA reach left
HReachRightEvent raised when HSA reach right
VReachTopEvent raised when VSA reach top
VReachBottomEvent raised when VSA reach bottom
OnVScrollEvent raised when a scroll happens in vsa.
scrollY | number
OnHScrollEvent raised when a scroll happens in hsa.
scrollX | number
OnHTouchDownEvent indicating a touch down on hsa.
OnHTouchUpEvent indicating a touch up on hsa.
OnVTouchUpEvent indicating a touch up on vsa.
OnVTouchDownEvent indicating a touch down on vsa.
RegisterHSARegisters given horizontal scroll arrangement for method execution
hsa | component
RegisterVSARegisters given vertical scroll arrangement for method execution
vsa | component
ToggleScrollingToggles scrolling of specific scroll view
enable | boolean
hscrollView | boolean
ScrollToSet the scrolled position of your view.sX and yX are the scroll position of view.If hScrollView value is true then method will be executed for hsa.
sX | number
sY | number
hScrollView | boolean
SmoothScrollToSmoothly scrolls to given position.If any speed is set then it will use that speed for scrolling.
sX | number
sY | number
hScrollView | boolean
ScrollByScrolls to given position by pixels.pX and pY are pixel value of scroll position.If hScrollView value is true then method will be executed for hsa.
pX | number
pY | number
hScrollView | boolean
SmoothScrollBySmoothly scrolls by the given pixel position of view.If any speed is set then it will use that speed for scrolling.
pX | number
pY | number
hScrollView | boolean
VArrowScrollHandle scrolling in response to an up or down arrow click.
direction | number
HArrowScrollHandle scrolling in response to an left or right arrow click.
direction | number
VGetScrollYReturns current scrollY position of vsa.0 if no view is registered.
HMaxScrollReturns max scroll position of hsa.0 if no view is registered.
VMaxScrollReturns max scroll position of vsa.0 if no view is registered.
HGetScrollXReturns current scrollX position of hsa.0 if no view is registered.
CanVSAScrollVerticallyReturns whether VSA can scroll in up(-1) and down(1)
direction | number
CanHSAScrollHorizontallyReturns whether HSA can scroll in left(-1) and right(1)
direction | number
VPageScrollHandles scrolling in response to a ‘page up/down’ shortcut press. This method will scroll the view by one page up or down and give the focus to the topmost/bottommost component in the new visible area. If no component is a good candidate for focus, this scrollview reclaims the focus.
direction | number
HPageScrollHandles scrolling in response to a ‘page up/down’ shortcut press. This method will scroll the view by one page up or down and give the focus to the topleft/right component in the new visible area. If no component is a good candidate for focus, this scrollview reclaims the focus.
direction | number
VFullScrollHandles scrolling in response to a ‘home/end’ shortcut press. This method will scroll the view to the top or bottom and give the focus to the topmost/bottommost component in the new visible area. If no component is a good candidate for focus, this scrollview reclaims the focus.
direction | number
HFullScrollHandles scrolling in response to a ‘home/end’ shortcut press. This method will scroll the view to the left or right and give the focus to the leftmost/rightmost component in the new visible area. If no component is a good candidate for focus, this scrollview reclaims the focus.
direction | number
UnregisterHSAUnregisters previously registered hsa.
UnregisterVSAUnregisters previously registered vsa.
VFlingFling the vsa with given velocity.Positive numbers mean that the finger/cursor is moving down the screen, which means we want to scroll towards the top.
velocityY | number
HFlingFling the hsa with given velocity.Positive numbers mean that the finger/cursor is moving right the screen, which means we want to scroll towards the left.
velocityX | number
HFadingEdgeEnabledSets fading edge effect in HScroll View
b | boolean
HSetEdgeEffectColorSets the edge effect color for both left and right edge effects of hsa.
Property Type : write-only
Accepts : number
VSetEdgeEffectColorSets the edge effect color for both top and bottom edge effects of vsa.
Property Type : write-only
Accepts : number
VFadingEdgeEnabledSets fading edge effect in VScroll View
Property Type : write-only
Accepts : boolean
HSmoothScrollSpeedSets smooth scrolling speed for hsa.Setting it 0 will reset the speed.
Property Type : write-only
Accepts : number
VSmoothScrollSpeedSets smooth scrolling speed for vsa.Setting it 0 will reset the speed.
Property Type : write-only
Accepts : number

4. Usages

First register scroll arrangement

5. Downloads

The extension is open source so that anyone can modify and improve it. Visit Github repo to see the code.

Hope it helps!

8 thoughts on “ScrollHandler: Handle the scroll of Scroll Views

  1. First, I want to say I appreciate all the hard work that goes into making something like this. Unfortunately the lack of documentation had me initially give up and delete your extension from my app. Then I got lucky and found someone’s answer about scroll values, specifically. Up –> 33 Down –> 130 Right –> 66 Left –> 17
    With that I was at least able to get some response. The second lucky find was discovering that setting hScrollView to FALSE got ScrollTo to work. Why it works I’m not sure. Does that mean one can only scroll H or V but not both? If true then why are there values for both H and V?
    Best Regards,
    Robert

    1. > Does that mean one can only scroll H or V but not both? If true then why are there values for both H and V?

      No, it works for both scroll views.
      If you set hScrollView to true then method will be executed/run for Horizontal Scroll View and if you set it to false then for Vertical Scroll View. In short, this parameter decides on which Scroll View you want to run a specific method.
      For discussions related to ScrollHandler please visit Kodular Community.
      https://community.kodular.io/t/scrollhandler-handle-the-scroll-of-scroll-views/78008

  2. Hi friend, this is a great extension and nothing like it elsewhere. I really need it for my app, but it’s not working on Kodular, please can you update it, thank you🙏

  3. Permission to ask if it is possible by using this extension, we can scroll on horizontal arrangement 1 and on horizontal arrangement 2 it will also scroll automatically, because it follows horizontal arrangement 1. If so, how do you do it? and thank you

Leave a Reply