A useful mobile scrolling plugin BetterScroll

Author: Didi webapp architecture team - Fu Nan

BetterScroll is an open source plug-in (GitHub address) that focuses on solving various scrolling scenario requirements on mobile devices. It is suitable for application scenarios such as scrolling lists, selectors, carousels, index lists, and opening screen guides.

To meet these scenarios, it not only supports flexible configuration of inertial scrolling, boundary rebound, scroll bar fade-in and fade-out effects to make scrolling smoother, but also provides many API methods and events so that we can realize the needs of scrolling scenarios more quickly, such as pull-down refresh and pull-up load.

Since it is implemented based on native JavaScript and does not rely on any framework, it can be referenced by native JavaScript or used in combination with the current front-end MVVM framework. For example, the example on its official website is combined with Vue.

First, let's look at how it makes scrolling smoother.

Make scrolling smoother

On mobile devices, if you have used overflow: scroll to generate a scrolling container, you will find that its scrolling is rather jerky and sluggish. Why does this happen?

Because we have long been accustomed to the scrolling experience of the current mainstream operating systems and browser windows. For example, there will be a rebound when scrolling to the edge, and the finger will continue to scroll for a while by inertia after stopping sliding. When the finger slides quickly, the page will also scroll quickly. This native scrolling container does not have it, which makes people feel stuck.

BetterScroll Scrolling Experience

Give BetterScroll a try. Experience Address

It can be found that after adding inertial scrolling, edge rebound and other effects, it is obviously smoother and more comfortable. So, how are these effects achieved?

Inertial rolling

BetterScroll will continue to scroll for a while when the user finishes the sliding operation. First, let’s look at the BScroll.prototype._end function in the source code. This is the processing function for touchend, mouseup, touchcancel, and mousecancel events, which is the logic when the user’s scrolling operation ends.

BScroll.prototype._end = function (e) {
    ...
    if (this.options.momentum && duration < this.options.momentumLimitTime && (absDistY > this.options.momentumLimitDistance || absDistX > this.options.momentumLimitDistance)) {
      let momentumX = this.hasHorizontalScroll ? momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options)
        : {destination: newX, duration: 0}
      let momentumY = this.hasVerticalScroll ? momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options)
        : {destination: newY, duration: 0}
      newX = momentumX.destination
      newY = momentumY.destination
      time = Math.max(momentumX.duration, momentumY.duration)
      this.isInTransition = 1
    }
    ...
}

The purpose of the above code is to use the momentum function to calculate the inertial scrolling distance and time when the user's sliding operation ends, if inertial scrolling needs to be turned on. This function calculates the scroll distance based on the user's sliding speed and the deceleration option - inertial deceleration. As for the scroll time, it is also a configurable option.

function momentum(current, start, time, lowerMargin, wrapperSize, options) {  
  ...
  let distance = current - start
  let speed = Math.abs(distance) / time
  ...
  let duration = swipeTime
  let destination = current + speed / deceleration * (distance < 0 ? -1 : 1)
  ...
}

Edge rebound

There are two processing steps for rebound when exceeding the edge. The first step is to slow down the speed when scrolling beyond the boundary, and the second step is to rebound to the boundary. The first step is in the BScroll.prototype._move function in the source code, which is the processing function of touchmove and mousemove events, that is, the logic during the user sliding operation.

// Slow down or stop if outside of the boundaries
if (newY > 0 || newY < this.maxScrollY) {
    if (this.options.bounce) {
        newY = this.y + deltaY / 3
    } else {
        newY = newY > 0 ? 0 : this.maxScrollY
    }
}

The second step is to call the BScroll.prototype.resetPosition function to bounce back to the boundary.

BScroll.prototype.resetPosition = function (time = 0, easing = ease.bounce) {
    ...
    let y = this.y
    if (!this.hasVerticalScroll || y > 0) {
      y = 0
    } else if (y < this.maxScrollY) {
      y = this.maxScrollY
    }
    ...
    this.scrollTo(x, y, time, easing)
    ...
  }

Smooth scrolling is just the basis. The real power of BetterScoll lies in: providing a large number of general/customized options, API methods and events to make various scrolling requirements more efficient.

How to apply to various demand scenarios

Next, let’s take the use of Vue as an example to talk about BetterScroll in various scenarios.

Normal scroll list

For example, there is the following list:

<div ref="wrapper" class="list-wrapper">
  <ul class="list-content">
    <li @click="clickItem($event,item)" class="list-item" v-for="item in data">{{item}}</li>
  </ul>
</div>

We want to make it scroll vertically, so we just need to perform a simple initialization of the container.

import BScroll from 'better-scroll'

const options = {
  scrollY: true // Because scrollY defaults to true, it can be omitted}

 
this.scroll = new BScroll(this.$refs.wrapper, options)

When using BetterScroll in Vue, there is one point that needs to be noted. Because the list DOM element is not generated when the list rendering is not completed in the Vue template, the BScroll instance can only be created after ensuring that the list rendering is completed. Therefore, in Vue, the best time to initialize BScroll is the nextTick of mouted.

// In Vue, ensure that BScroll is initialized when list rendering is complete
mounted() {
   setTimeout(() => {
     this.scroll = new BScroll(this.$refs.wrapper, options)
   }, 20)
},

After initialization, the wrapper container can scroll gracefully, and the API methods and events provided by the BScroll instance this.scroll can be used.

The following are some commonly used options, methods and events.

Scrollbars

The scrollbar option is used to configure the scroll bar. The default value is false. When set to true or an Object, enable the scroll bar. You can also use the fade property to configure whether the scroll bar fades in and out as you scroll, or remains displayed.

// fade defaults to true, scroll bar fades in and out options.scrollbar = true

// The scroll bar is always displayed options.scrollbar = {
  fade: false
}

this.scroll = new BScroll(this.$refs.wrapper, options)

For specific effects, see Normal scroll list - example.

Pull down to refresh

The pullDownRefresh option is used to configure the pull-down refresh function. When set to true or an Object, pull-down refresh is enabled. You can configure the pull-down distance (threshold) to determine the refresh timing, and the rebound stop distance (stop)

options.pullDownRefresh = {
  threshold: 50, // When the pull-down exceeds 50px from the top, the pullingDown event is triggered stop: 20 // During the data refresh process, the rebound stays at a position 20px away from the top}

this.scroll = new BScroll(this.$refs.wrapper, options)

Listen to the pullingDown event and refresh the data. After refreshing the data, call the finishPullDown() method to bounce back to the top boundary.

this.scroll.on('pullingDown', () => {
  // During the data refresh process, the rebound stays 20px away from the top RefreshData()
    .then((newData) => {
      this.data = newData
      // After refreshing the data, call the finishPullDown method to bounce back to the top this.scroll.finishPullDown()
  })
})

For specific effects, see Normal scroll list - example.

Pull-up loading

The pullUpLoad option is used to configure the pull-up load function. When set to true or an Object, pull-up loading can be enabled, and the distance threshold from the bottom can be configured to determine when to start loading.

options.pullUpLoad = {
  threshold: -20 // When the pull-up exceeds 20px from the bottom, the pullingUp event is triggered}

this.scroll = new BScroll(this.$refs.wrapper, options)

Listen to the pullingUp event and load new data.

this.scroll.on('pullingUp', () => {
  loadData()
    .then((newData) => {
      this.data.push(newData)
  })
})

For specific effects, see Normal scroll list - example.

Selector

The wheel option is used to enable and configure the selector. You can configure the selector's currently selected index (selectedIndex), the list's curvature (rotate), and the adjustment time (adjustTime) for switching selected items.

options.wheel = {
  selectedIndex: 0,
  rotate: 25,
  adjustTime: 400
}

// Initialize each column of the selector this.wheels[i] = new BScroll(wheelWrapper.children[i], options)

See Selector - Example for more details.

The linkage selector needs to monitor the selection of each selection list to change other selection lists.

data() {
   return {
     tempIndex: [0, 0, 0]
   }
},
...
// Listen for the selection of each selection list this.wheels[i].on('scrollEnd', () => {
  this.tempIndex.splice(i, 1, this.wheels[i].getSelectedIndex())
})
...
// Determine the contents of other selection lists based on the current selection computed: {
  linkageData() {
    const provinces = provinceList
    const cities = cityList[provinces[this.tempIndex[0]].value]
    const areas = areaList[cities[this.tempIndex[1]].value]

    return [provinces, cities, areas]
  }
},

For more information, see Selector - Linked Selector in Example.

Carousel

The snap option is used to enable and configure the carousel. You can configure whether the slideshow plays in a loop (loop), the width (stepX) and height (stepY) of each page, the switching threshold (threshold), and the switching speed (speed).

options = {
  scrollX: true,
  snap: {
    loop: true, // Start loop playback stepX: 200, // Each page is 200px wide
    stepY: 100, // Each page height is 100px
    threshold: 0.3, // Switch images when scrolling distance exceeds 30% of width/height speed: 400 // Switch animation duration 400ms
  }
}

this.slide = BScroll(this.$refs.slide, options)

For specific effects, see Slideshow - Example.

Special scenarios

In addition to basic scrolling scenarios such as ordinary scrolling lists, selectors, and carousels, you can also use the capabilities provided by BetterScroll to do some special scenarios.

Index List

The index list first needs to monitor in real time which index area is scrolled to during the scrolling process to update the current index. In this scenario, we can use the probeType option. When this option is set to 3, scroll events will be dispatched in real time during the entire scrolling process. Thereby obtaining the position during the scrolling process.

options.probeType = 3
this.scroll = new BScroll(this.$refs.wrapper, options)

this.scroll.on('scroll', (pos) => {
  const y = pos.y

  for (let i = 0; i < listHeight.length - 1; i++) {
    let height1 = listHeight[i]
    let height2 = listHeight[i + 1]
    if (-y >= height1 && -y < height2) {
      this.currentIndex = i
    }
  }
})

When you click on an index, use the scrollToElement() method to scroll to that index area.

scrollTo(index) {
  this.$refs.indexList.scrollToElement(this.$refs.listGroup[index], 0)
}

See Index List - Example for more details.

Open screen guide

The opening screen guide is actually just a horizontally scrolling carousel that does not automatically loop.

options = {
  scrollX: true,
  snap: {
    loop: false
  }
}

this.slide = BScroll(this.$refs.slide, options)

For specific effects, see the opening screen guide - Example. Because this demand scenario is generally only available on mobile devices, it is best to view the effect in mobile mode.

Free Scroll

The freeScroll option is used to enable free scrolling, allowing both horizontal and vertical scrolling without being restricted to a certain direction.

options.freeScroll = true

Also note that this option has no effect when eventPassthrough is set to keep native scrolling.

For specific effects, see Free Scrolling - Example.

summary

BetterScroll can be used in almost all scrolling scenarios. This article only introduces its usage in some typical scenarios.

As a plug-in designed to solve the scrolling needs of mobile devices, BetterScroll provides many options, methods and events, which actually provide us with the ability to handle scrolling more quickly, flexibly and accurately.

This is the end of this article about a useful mobile scrolling plug-in called BetterScroll. For more related content about BetterScroll mobile scrolling plug-in, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!