Event Handlers (Scrollable)

scrollable: Scrolling in Elements

The scrollable LogUI event handler captures scrolling events that take place within a given element. It can capture the start and the end of the scrolling events that take place (or at least, a best-guess approximation of the end of the event). This leaves you with cleaner interaction logs -- capturing a basic scroll event will record additional events inbetween the start and end. scrollable captures a definitive start and end point for the scrolling action.

Example Usage

Below is a JavaScript snippet that shows an example configuration mapping to demonstrate how to use the scrollable LogUI event handler.

'entity-mousemovements': {
    selector: '#widget-box',
    event: 'scrollable',
    properties: {
        scrollStart: {
            name: 'WIDGET_SCROLL_START',
        },
        scrollEnd: {
            name: 'WIDGET_SCROLL_END',
        },
    },
}

Note the inclusion of a properties setting. Within this setting, you'll find nested JavaScript objects -- one for the start of the scroll event (scrollStart), and one for the end (scrollEnd). Each of these keys corresponds to further nested objects, each of which has a name key. The associated value for the name key is the value that is presented in the interaction log.

This handler works by registering all the unique native scroll events that take place on given elements. The handler waits a predetermined period of time before deregistering the captured scroll event. If the user scrolls in quick succession, there will be multiple scroll events captured. The idea behind this is when the number of captured scroll events reaches zero for a given element (i.e., the timeouts have elapsed for all of them), the user must have finished scrolling, and thus the scroll event is complete. This is when the scrollEnd event is fired. When an element that has no registered scroll events is scrolled on by the user, the scrollStart event is fired, which is where this process begins.