ES6 snacks are, as the name suggests, ready-to-eat and ready-to-use.

Present the third snack: Floor.

GitHub

The online demo

Remember to click a star on GitHub if you think it’s useful

[Floor positioning] is a common requirement in daily front-end development. The effect itself is not very sophisticated, and Jser can usually create one in a few minutes. But when compatibility is taken into account, the picture becomes more complicated. Especially mobile compatibility, inconsistent UI performance, discontinuous Scroll event triggering, blabla… . After a painful experience implementing this requirement, WE decided to create a plugin that wouldn’t disgust the front-end folks with compatibility issues.

The main logic of floor location is to determine the current focal floor based on the scrolling position when the user touches the screen and slides. Simple to say, if it is a PC, directly listen to scroll events can be done. However, on the mobile terminal, the scroll event triggering of IOS is discontinuous, which will lead to very poor user experience. As an ambitious front-end developer, I can’t stand the clunky touch experience. Swiper’s Swiper experience is pretty good. After careful study, it turns out that the Swiper is not a native scroll, but a simulated scroll with some features of CSS3. Later found iscroll.js plug-in, the somebody else professional do simulation of rolling. So I decided to use iscroll.js as a rolling simulator, stumbling all the way, finally write out the floor location. Although it is not perfect, the compatibility is relatively complete (it does not promise to be compatible with all models, but most mainstream machines have passed the test), and the user experience is unified and smooth. Then share out, welcome to find trouble ha ^_^

Without further ado, here are the renderings:

I won’t have time to explain, but look at the examples.

The main usage scenarios for this effect are mainly mobile.

Start with a small goal:

  • Ease of use, if you feel difficult to use, then there is no need to share.
  • Compatibility, compatible with major browsers, but not all (IE earlier versions);
  • Mobile first, mainly for mobile terminals to do more consideration;

Rely on iscroll

It hurts enough to rely on one jQuery, but with each additional dependency, the plug-in’s ease of use and popularity is greatly diminished. But there is no way, the dependence has to rely on. If you write a crappy jQuery, you don’t know what hidden bugs you’ll create. Iscroll is chosen because the native scroll event on the mobile side is not satisfactory. If you only serve the PC side, you only need to bind the Scroll event. On mobile, however, things get trickier. Region scrolling on mobile, the last inertial movement on some IOS phones does not trigger the Scroll event, and android and IOS region scrolling performance is quite inconsistent. Iscroll aims to resolve these incompatibilities and inconsistencies by providing a silky, consistent scrolling experience. Considering the goal of this plug-in — to support both PC and mobile, ease of use and volume give way to compatibility O (╥﹏╥)o

If you don’t know anything about iscroll.js, that’s great, because Floor has it wrapped simple enough. Of course, if you are an iscroll.js expert, this will give you more customizability. If you’re interested in iscroll.js, the resources are all here.

IScroll website

IScroll API Chinese version

use

Same API style as the previous few snacks, simple, as simple as possible.

The basic use

Here is the simplest use of Floor:

const floorA = new Floor({
    container: '#floor-A',})Copy the code

Simplicity, simplicity is important. Keep it as simple as possible is the first rule of thumb when designing the Snack series apis.

onFloorChange

OnFloorChange is the only callback and the most important feature of the plugin. The onFloorChange is triggered only when the focal floor changes.

scrollTo

Scrolls the floor to the specified position.

Since scrollTo calculates the position based on the offset of the container and wrapper, margin is not counted, border and padding are counted. The safest way to do this is to leave margins, borders, and paddding out of containers and wrappers, and you won’t have to worry about these details and your application won’t behave weirdly. Otherwise, the end result may not be as good as you expect, and you need to learn how to implement scrollTo. Why bother?

Other snacks:

General pop-up

Popover appears at the bottom