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');