This handler is not fully implemented.

The basics of all event handlers is described in another post. This post describes ScrollHandler.

ScrollHandler listens to javascript scroll events. Scroll events do not bubble, so even though it is possible to set a selector(), it will not change anything. Only scroll events for the listen() element are handled.

Scroll events can happen rapidly, so it can be useful to use debounce on them

BuildScrollListener()

.listen(‘#scrollable-element’)

.debounceMSecs(200)

.onScroll(handleScroll)

.build();

OnScroll, OnScrollToLeft, OnScrollToTop

BuildScrollListener()

.listen(‘#scrollable-element’)

.onScroll(handleScroll)

.onScrollToLeft(handleHorizontalScroll)

.onScrollToTop(handleViticalScroll)

.build();

function handleScroll(target,event,handler) {}

function handleHorizontalScroll(left, target,event,handler) {}

function handleHorizontalScroll(top, target,event,handler) {}

onScroll simply passes the target element and event to the callback.

onScrollToLeft passes the target element’s scrollLeft value as well as the 3 standard parameters.

onScrollToTop passes the target element’s scrollTop value as well as the 3 standard parameters.

onScrollToLeft and onScrollToRight provide no additional functionality but make it clear which scroll direction is wanted.

OnScrollHorizontal, OnScrollVertical

These callbacks are like onScrollToLeft and onScrollToRight but add a percentage calculation. The first parameter is an object

{

position: 50,

minimum: 0,

maximum: 200,

percent: 0.25,

distance: 5

}

There is currently no way to change the range.

minimum is 0.

maximum is the element’s width or height.

position is scrollLeft or scrollTop

distance is the change since the previous callback.

Future enhancements may add the ability to specify different ranges, and non-linear mapping from the element’s scroll position to the ScrollHandler position.

To Do

It may be useful to use a selector and attach a javascript event listener to each matching element. This would require a mutation listener to add and remove listeners as matching elements are added or removed from the DOM.