Introducing Ignite UI Scroll

Introduction

In today’s blog we would like to introduce the new igScroll. This control was previously used only internally in the Ignite UI controls. In this release we rewrote the control to take advantage of the latest browser features and decided to officially release it as part of the toolset. The control allows our customers to create custom scroll solution than the default scrolling the browser provides. The control is available both in the Ignite UI 16.2 Volume Release and on GitHub in our Open Source repository.

igScroll Features

Its goal is to provide a unified and consistent scrolling experience across different platforms and devices. While achieving that it also aims to preserve the most widely used and friendly features and interactions that the browsers provide which the users perform on a daily basis. That way the users will be already familiar with these features.

The main features that the igScroll implements while on desktop or mixed environment are scrolling through mouse wheel, through the provided scrollbars or through keyboard interactions as well.

On touch environments the main focus is user friendliness without distancing itself too much from the default browser experience. That is why it will react on swipes and taps, while providing inertia as well depending on the swipe both vertically and horizontally. To enhance the user experience, the igScroll also implements horizontal swipe tolerance, which means that there will be some dead zone on the horizontal axis initially when starting a swipe. This is to provide the user of small error margin when swiping fast vertically which may result in horizontal movement as well that will lead to unwanted scrolling left or right.

The igScroll provides a more customizable solution for all described features in the previous paragraphs, compared to the default browser and can easily be changed through its options. It also gives the ability for the scrollbars to be styled in any way while providing even more events when interacting with them. That could help in distinguishing if the user has scrolled by using the thumb drag of the scrollbar, by using the arrows or the track area where the thumb drag moves.

Since it was designed to help with the scrolling of the igGrid in many different scenarios it supports syncing between multiple igScroll instances or syncing between an igScroll instance and simple container. This can be used in different scenarios where for example a difference between two texts needs to be previewed or having a content that is spread across two separate elements needs to be synced when scrolling. It also supports detaching of the igScroll’s scrollbars so they can be positioned everywhere and still be interactable or even passing custom scrollbars that have custom implemented logic for scrolling behind them.

Configuring a simple scrollable content

Now let’s look into making content scrollable with the igScroll. It can be achieved easily by initializing the igScroll widget on that element that contains the content. For example, let’s say we have some text paragraphs that we want them put in a container, which could be scrolled by either mouse wheel, scrollbars or touch interactions (when on touch device). To do that we only need to initialize the igScroll onto that container and all these features will be available by default.

If we have the following configuration for body of our page:

Initializing the igScroll on it would look like:

The final looks that we have for our content, with some styling for the #scrContainer would look similar to the screenshot bellow:

Fig. 1: Default igScroll look

Customizing the overall look of the igScroll

As we said earlier the scrollbars that come with the igScroll are fully customizable. This is done through the classes that are applied to them. Since the igScroll is designed for customization, each element has its own set of specific classes that are applied to it.

Two examples of customized scrollbars can be seen in the images bellow:

Fig. 2: Customized igScroll scrollbars

Fig. 3: Customized igScroll scrollbars

The both examples that are displayed above can be seen on our GitHub page. The first example can be seen here, and the second one here.

Syncing containers

Finally, we will look into a more advanced feature that the igScroll is introducing – syncing between multiple igScroll instances. In the following example we will look into connecting two containers that aim to display a difference between two texts. In this case the experience will be greatly enhanced by the ability for both containers to have same scroll position so the differences between each text can be viewed more clearly.

http://jsfiddle.net/cb1c81n9/1        

In the example above you can see that igScroll is initialized on both containers that we want to scroll just like the example we gave in the “Configuring a simple scrollable content” part. The options respectively used are the syncedElemsV/syncedElemsH so they can specify the other element that will be linked on the desired direction.