Functional description

  • requirements

    • The page is divided into two sections, AB

    • When the bottom of the phone’s viewing area touches the “damping band,” there is a pull-up elastic process

      • When the pull-up reaches a certain threshold, pop the top of the B area directly to the top of the mobile phone’s viewable area, so that the viewable area is displayed from the B area
      • When the pull-up degree does not reach the threshold, the system bounces back to recover

    • When the mobile phone’s view area rolls up from zone B, the top of zone B contacts the “damping band”, which has a pull-down elastic process

      • When the drop reaches A certain threshold, pop the bottom of area A directly to the bottom of the mobile phone view area, so that the view area from the bottom of area A up display
      • If the pull down degree does not reach the threshold, it bounces back and recovers

  • prompt

    • JQuery implementation

Concrete implementation process

First of all, what is the damping effect? Check online:

Damping (English: damping) refers to the characteristic of vibration amplitude decreasing gradually due to external effects and/or inherent reasons of the system during vibration, as well as the quantitative characterization of this characteristic.

Well, it’s hard to understand. I don’t get it. However, this effect is common on the iPhone.

Simply put, it’s the elastic effect of an interface sliding to the bottom or top and still sliding a little further than the actual content and then bouncing back. As you can see from the effect, there are three key points:

  • Slide to the top or bottom to appear.
  • It shows that the content is swiped a little further than it actually is. The actual operation knows that the swiping distance is the distance that the finger swipes on the screen.
  • When you let go, it bounces back.

Now that you know what a damping effect is, think about how to implement it. For the second point, we can listen for the TouchStart, TouchMove, and TouchEnd events, similar to mouse drag-and-drop:

  1. When touchStart, note down the starting position;
  2. Touchmove calculates the distance of the swipe in real time.
  3. When you touchEnd, you can get the final sliding distance and compare it to the set threshold. Enter the page automatic control stage: if the value is greater than the threshold, the page will slide to the next page; if the value is smaller than the threshold, the page will be restored to the starting position.

In the process of my implementation, I thought of two schemes.

  1. The general idea with Js is to detect that the page has slid to the bottom (the same as the top) by monitoring the wheel event, and calculate the sliding distance of the finger on the page. When the touchmove event is triggered, add the padding-bottom to the damping belt below, so as to create an illusion that the page slides more than one distance with the finger. Disadvantages: using JS to achieve animation is more performance – consuming.

  2. Using CSS the second solution uses CSS animation, the page slides a distance, in fact, you can also translate a distance by sliding the page to the direction of the finger, this time the page as long as the background color is the same, also can achieve the same effect. Because Translate can be launched with browser hardware acceleration, performance is guaranteed.

If you can do it with CSS, never use JS.

However, a problem was found in the implementation of the second scheme. If we reach the bottom after sliding for a certain distance, we do not release our hands and slide back again, a bug will appear.

I’m monitoring the position of the scroll bar to see if it’s at the bottom.

$(document).scroll(() => {
    isBottom = document.scrollTop() >= $(document).height() - $(window).height();
});
Copy the code

Because of the process of sliding back, the scrollbar also slides up, resulting in isBottom error, a bug.

I searched a lot of information on the Internet, but I didn’t find an ideal solution. However, I found a mobile plug-in: Swiper, which is a pure javascript plugin designed for mobile terminals such as phones and tablets. The plugin also implements damping effects. Swiper also uses the translate method to move the page up some distance, but implements the scroll bar itself by setting overflow: Hidden on the outside container to disable the original scroll bar. The simple truth is that we can use the Touch Event Translate page, as well as the Translate scroll bar to achieve their own control.

I found a solution that mimicked Swiper (but omitted the scrollbar part of the code implementation, i.e. the page had no scrollbar) and roughly implemented the damping effect.

See my Github for more details. It uses Webpack to package and compile.