Scrollbar

Gameface provides you with an in-house library for creating reusable scrollbars in your interface using JavaScript. This documentation provides the necessary details required to implement and use this library.

To use the scrollbar, include the scrollbar.js file that is located in the Samples/uiresources/Scrollbar folder of the distribution package.

After you include the scrollbar.js a Scrollbar object will be exposed to the global namespace. To create a scrollbar, you must have a container element with overflow set to hidden and a content container:

<div class="container">
    <div class="content"></div>
</div>

To add a scrollbar to the HTML above, add the following code:

Scrollbar.create({selector: '.container'});

The create method takes a single argument for configuring the scrollbars. The allowed properties that can be specified via the configuration object are:

• Selector {string | HTMLElement | object | Array<string | HTMLELEMENT | object>} - specifies the selector of the element or elements you want to add a scrollbar to.
  • string - used to specify a CSS selector, e.g.: “.my-class-name”, “#my-id”, etc.;
  • HTML element - each instance of HTMLElement class;
  • an object - a custom configuration for a particular set of elements. The object value can have its own selector, contentSelector, and registerAll properties, which remain unaffected by other properties in the main object;
  • an array - this property allows you to create scrollbars for all the elements inside the array, which may include any of the above;
• contentSelector {string} - the selector of the scrollable content.
• registerAll {boolean} – specifies whether to add a scrollbar to all elements that match the given selector.
• trackClassName {string} – custom class name, used to add custom styles to the scrollbar track.
• thumbClassName {string} - custom class name, used to add custom styles to the scrollbar thumb.

If you need to use a different configuration for a set of specific elements, pass an object to the selector property. Here is an example configuration:

        Scrollbar.create({
            selector: ['.wrapper1', document.querySelector('.wrapper2')],
            registerAll: true,
            trackClassName: 'track-bg',
            thumbClassName: 'green'
        });

In this example, the track-bg and green class names will be applied to all elements that match the '.wrapper1' selector and to the HTMLElement passed as the second element in the selector array. If you have a third element to which you want to apply different styles, you can either call create again with a different configuration or add a custom configuration object to the selector array:

        Scrollbar.create({
            selector: [
                '.wrapper1', document.querySelector('.wrapper2'),
                {
                    selector: '.wrapper3',
                    itemsSelector: '.items,
                    registerAll: false,
                    thumbClassName: 'blue'
                }],
            registerAll: true,
            trackClassName: 'track-bg',
            thumbClassName: 'green'
        });

In this case, the first element that matches the '.wrapper3' selector will have blue added as a class name to the scrollbar thumb.