IOS's elastic rolling solution

  • 2021-01-22 05:24:50
  • OfStack

Elastic scrolling refers to the transition from slow to block and from fast to slow when the fingers leave a long page.

Most browsers on the Android platform have this behavior by default

ios is currently only available < body > overflow generates elastic scrolling by default

A while ago to do a mobile phone official website, used < div > overflow in overflow, then debugging ios encountered the problem of elastic rolling:

webkit under ios Elastic Rolling css instruction -webkit-overflow-scrolling: touch; webkit under ios Elastic Rolling css instruction -webkit-overflow-scrolling: touch;

The instruction to switch again need to do the same rolling div is encountered 1 case

1. Scroll along with the last scroll

2. Initial positioning deviation

3. Sticky blocking (loss of focus)

Solution:


 .session{
    -webkit-overflow-scrolling: touch;
  }

1. Remove the overflow-scrolling attribute from the element when switching labels


$('.session').removeClass('sollow');

2. Switch labels and initialize target div


document.getElementById('target').scrollTop = '0px'; //  Add as needed 

3. Reload sollow on the target element


$('.session:eq(' + tar + ')').addClass('display sollow');

Related articles: