The paper

Mescroll.js is a pull-down refresh and pull-up load component running on the H5 side (due to the rapid development of the front end, a UNI version is also available). Of course, there are many other components available in the H5 domain, but mescroll.js and Better Scroll are the main ones here.

Mescroll is div native overflow: Auto scrolling. Unlike iScroll and Better-Scroll, which simulate list scrolling through JS, Mescroll has better performance and compatibility.

As we all know, in our daily development scenarios, the typical product interaction is pull-down refresh and pull-up load more. So for such scenarios, either mescroll.js or better Scroll can well meet the development requirements. One type of scenario, though rare, still exists, such as chat logs and history messages (which are essentially pull-down loading history messages).

Realize the principle of

Pull-up load: Listens to scroll to the bottom, triggers the load logic, and adds nodes at the bottom. The length of the scrolling content in the container becomes longer, and you can continue to slide up until you hit the bottom and then enter the loading logic.

Pull-down load: Listens to scroll to the top and listens for the pull-down displacement distance through the touch event until the pull-down load logic is triggered and the new node is inserted at the top.

Pull-down load tuning

According to the above implementation principle, pull-up loading is to insert new content at the bottom of the document flow from top to bottom, the current display area will not change after the bottom is added, so the effect is very smooth. However, pull-down loading is different. When loading is triggered and a new node is added at the top, the overall content of the current page will be pushed down, resulting in poor page flashing experience. A reasonable interaction would be to show some of the new content at the top of the page after the addition, but the page would not be pushed down, and the user would manually scroll down to see more information.

The above problem needs to be tuned. The principle is very simple. When the new node is loaded by pull-down, the top content becomes more and the display area will move down under normal circumstances. So when the addition is finished, we only need to actively scroll the current scrolling area up until the display area before loading, and the good experience from the naked eye is that the page has not changed.

Of course, this is fine in principle, but in real practice mescroll will have animation effects such as rebound that interfere with the experience, so we can choose to comment out the necessary dynamic styles in the component source code, or optimize part of the interaction logic.

The last

There are many components in the open source community that can implement pull-up load, pull-down refresh, or pull-down load, but they all work in the same way, either by scrolling through native Div Overflow: Auto or by transforming: Translate (x,y) CSS3, as long as you master the implementation principle, which effect can be implemented.

The resources

  • mescroll.js