WebKit overflow scrolling for IOS mobile terminal

Time:2021-9-19

-webkit-overflow-scrolling

1. General

1.1 definitions

Property controls whether the element uses the roll back effect on the mobile device

1.2 value

  • Auto: use normal scrolling effects. When the finger leaves the touch screen of the device, the scrolling will stop immediately
  • Touch: use scrolling with rebound effect. When the finger leaves the touch screen of the device, the content of the scrolling area will continue to scroll for a period of time, and the speed of continuous scrolling is directly proportional to the time and the severity of gesture sliding.

2. Browser compatibility

-webkit-overflow-scrollingFor browser compatibility of properties, refer toCanIUse

3. Usage scenario

On the IOS mobile terminal, when usingoverflow: scroll;Property, the scrolling effect is slow and not smooth, which can be used

-webkit-overflow-scrolling: touch;Property to make the scroll bar rebound, increase the smoothness of scrolling and improve the user experience.

4. Problems

When the page slides to the bottom (not found at the top), when the rebound effect ends, continue to pull up and roll the page down, which will cause the rolling area to get stuck and return to normal automatically after a period of time. This attribute contains many problems, but not limited to the above.

5. Solutions

5.1 principle

During the process of finger sliding on the touch screen of the mobile device, monitor three events: the beginning of finger sliding, the process of sliding and the end of sliding. In the sliding event, check whether the current sliding position reaches the bottom of the rolling area. If it reaches the bottom, stop sliding.

5.2 realization

Add events related to gesture touch to the sliding area

Define a variable to record the ordinate value of the latest position during the last gesture sliding

export default {
  data () {
    Lastscrolly: 0 // the ordinate of the latest position during the last gesture sliding
  }
}

Monitor whether the scroll area has reached the bottom through the event starting during gesture sliding

export default {
  methods: {
    touchStart(e) {
      //Record the ordinate of the starting position at the beginning of sliding
      this.lastScrollY = e.touches[0].clientY
    },
    touchMove(e) {
      //Record the ordinate of the current position during sliding
      let top = e.touches[0].clientY
      //The distance from the top of the current scroll bar
      let scrollTop = e.currentTarget.scrollTop
      //Determine the scroll direction of the scroll bar
      let direction = (this.lastScrollY - top) < 0 ? 'up' : 'down'

      //(if the distance from the scroll bar to the top > = height of the scroll area - height of the scroll visible area) & & the scroll direction of the scroll bar is down: it has reached the bottom of the scroll area
      if (scrollTop >= (e.currentTarget.scrollHeight - e.currentTarget.offsetHeight) && direction === 'down') {
        //Cancels the default behavior for events
        e.preventDefault()
        //Restore recorded coordinate values
        this.lastScrollY = 0
      } else {
        //Otherwise, the current position ordinate of the record is updated
        this.lastScrollY = top
      }
    },
    touchEnd() {
      //Restore the recorded coordinate values at the end of each slide
      this.lastScrollY = 0
    }
  }
}