Author avatar

Vivek Kumar

React.js and Horizontal IScroll 5 with Dynamic Width

Vivek Kumar

  • Jul 29, 2019
  • 9 Min read
  • 1,281 Views
  • Jul 29, 2019
  • 9 Min read
  • 1,281 Views
Web Development
React

Introduction

We all know that working with the ReactJS component has its own perks. The framework remains seamless and its stability is second to none. The level of transition that we can attain in ReactJS with the help of its libraries and props has its own depth and, even for a professional animator, the scope is enormous.

This guide is specifically created to show you how to get a successful transition between ReactJS and horizontal iScroll 5 with dynamic width. The adjustment of the dynamic width in Horizontal iScroll 5 is one of the key functions that even the professionals are required to learn in the correct way. This is, basically, because of the fact that the content and the style within the page are required to be compatible with the horizontal scroll so that the person using the whole set of things does not face issues in one way or another.

In this guide, you are going to get an overview of React iScroll 5, how the installation and functioning take place, and the standard commands used in the same.

What Is React iScroll 5 All About?

iScroll5 for React is an independent, high-performance javascript scroller that has a small footprint yet is proficient enough to operate upon multiple platforms. It is a highly acclaimed JS scroller that can perform seamlessly, irrespective of whether you are working on a desktop or mobile platform. It is highly conducive to different components of scrolling, including parallax scrolling, paging, carousels, and zooming. One of the most prominent aspects of this JS scroller is that it can be compiled into a zipped format with a small size of 4kb.

The Standard Problem Faced in iScroll Functioning with ReactJS

Using ReactJS components is a prominent way to compose your application. But when we look at the standard way iScroll functions with ReactJS to create a dynamic width, then we generally come across certain problems.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var SubHeaderMenu = React.createClass({
getDefaultProps: function () {
    return {items: []};
},

componentDidMount: function () {
    if (this.props.items.length && this.isMounted()) {
        this.scroll = new IScroll(this.getDOMNode(), {
            scrollX: true,
            scrollY: false,
            mouseWheel: true,
        });
    }
},

render: function () {
    var itemNodes = this.props.items.map(function (item) {
        return <div key={item.name} className="subheader-item">{item.name}</div>;
    }.bind(this));

    return (
        <div className="bar bar-standard bar-header-secondary subheader">
            <div className="scroller" ref="scroller">
                <div className="scroller-inner" ref="scrollerInner">{itemNodes}</div>
            </div>
        </div>
    );
}
});
javascript

Now, in the snippet highlighted above, we have taken the .scroller { width: 600px; ... } but, without mention of the width in CSS, it does not scroll at all.

It is crucial to note that while operating the dynamic width be related to every list item each time. So, in the below-given steps of this guide, we are going to discuss how we can get a successful transition between ReactJS and Horizontal iScroll5 with dynamic width.

The Installation Process

The installation process of the React iScroll can be done with the following command:

npm install react-iscroll

Functioning of iScroll

The following commands are going to display how we can enable ourselves to scroll a long list and how to catch a specific event at the time when the scrolling commences.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var React = require('react'),
    ReactIScroll = require('react-iscroll'),
    iScroll = require('iscroll');
 
var ExampleApp = React.createClass({
  getDefaultProps: function() {
    return ({
      options: {
        mouseWheel: true,
        scrollbars: true
      }
    })
  },
  onScrollStart: function() {
    console.log("iScroll starts scrolling")
  },
  render: function() {
    var i = 0, len = 1000, listOfLi = [];
 
    for(i; i < len; i++) {
      listOfLi.push(<li key={i}>Row {i+1}</li>)
    }
 
    return (
      <div style={height: '100vh'}>
        <h1>Example of scrollable list</h1>
        <ReactIScroll iScroll={iScroll}
                      options={this.props.options}
                      onScrollStart={this.onScrollStart}>
          <ul>
            {listOfLi}
          </ul>
        </ReactIScroll>
      </div>
    )
  }
})
javascript

The Configuration (Application Programming Interface)

Here, we are going to demonstrate the basic configuration. With the help of this configuration, you can pick the desired component from the iScroll library and create whatever you want to.

1
2
3
4
5
var iScroll = require('iscroll/build/iscroll-lite')
 
<ReactIScroll iScroll={iScroll}>
  <div>Long content...</div>
</ReactIScroll>
javascript

With the options property given within the framework, you can customize the iScroll options as per your convenience.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var iScroll = require('iscroll/build/iscroll-probe')
var options = {
  mouseWheel: true,
  scrollbars: true,
  freeScroll: true,
  invertWheelDirection: true,
  momentum: false,
  indicators: {...}
}
 
<ReactIScroll iScroll={iScroll}
              options={options}>
  <div>Long content...</div>
</ReactIScroll>
javascript

The component is going to be conducive to all the iScroll events and each one of them passes through the iScroll instance to the callback.

1
2
3
4
5
6
7
8
9
10
11
12
13
var iScroll = require('iscroll/build/iscroll-probe')
 
<ReactIScroll iScroll={iScroll}
              onBeforeScrollStart={this.onBeforeScrollStart}
              onScrollCancel={this.onScrollCancel}
              onScrollStart={this.onScrollStart}
              onScroll={this.onScroll}
              onScrollEnd={this.onScrollEnd}
              onFlick={this.onFlick}
              onZoomStart={this.onZoomStart}
              onZoomEnd={this.onZoomEnd}>
  <div>Long content...</div>
</ReactIScroll>
javascript

As you can note, there is one specific event termed onRefresh which is actually triggered in cases where the iScroll is simply refreshed. One can acquire the specific state of iScroll5 by using iscroll.scale, iscroll.hasVerticalScroll or iscroll.x.

In Horizontal Scroll

The most general use case associated with horizontal scrolling can be seen in the commands described below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var React = require('react'),
    ReactIScroll = require('react-iscroll'),
    iScroll = require('iscroll');
 
var HorizontalScroll = React.createClass({
  render: function() {
    return (
      <ReactIScroll iScroll={iScroll}
                    options={{mouseWheel: true, scrollbars: true, scrollX: true}}>
        <div style={{width:'200%'}}>
          <ul>
            {listOfLi}
          </ul>
        </div>
      </ReactIScroll>
    )
  }
})
javascript

As you can see in the above snippet, the width adjustment of the horizontal scroll has been successfully done up to 200%. The results that we attain in this manner are going to be stable and conducive.

The dynamic width for horizontal iScroll that you can get to function with ReactJS is going to be highly supportive of the style and the content present over that specific page. The width adjustment has been taken in such a manner so that you can function with the ReactJS on both webpages and mobile applications. So, whatever the need be, the results that you acquire are going to be outstanding.

Conclusion

In this guide, you have learned the relationship between the ReactJS component and the elements of iScroll 5 as well as how it can help you in attaining a seamless dynamic width. We went through certain descriptions about ReactJS iScroll and the features associated with it. Similarly, we explored the installation process and the usage, as well as the API configuration and how to make the right changes in the horizontal scroll options while entering the commands in order to attain the right quantity of dynamic width without compromising with quality.

There has been much to cover in order to enrich you with the right information. It is fully expected that this guide is going to help you in circumstances where you are unable to establish the relationship between ReactJS and the iScroll5 component for dynamic width adjustment.

References

While writing this guide, the following resources have been referred to:

1