IOS端h5 fixed滚动问题

Published: · LastMod: April 07, 2024 · 185 words

IOS端h5 fixed滚动问题 🔗

1
2
3
4
5
6

visualViewport.addEventListener("resize", resizeHandler);

const resizeHandler = () => {
    // ...
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// 需要针对 iOS 越界弹性滚动的情况进行边界检查
styles.left = Math.max(0, Math.min(
    document.documentElement.scrollWidth - visualViewport.width,
    visualViewport.offsetLeft
)) + 'px';

// 需要针对 iOS 越界弹性滚动的情况进行边界检查
styles.top = Math.max(0, Math.min(
    document.documentElement.scrollHeight - visualViewport.height,
    visualViewport.offsetTop
)) + 'px';

styles.width = visualViewport.width + 'px';
styles.height = visualViewport.height + 'px';

Reference 🔗

https://tkte.ch/articles/2019/09/23/iOS-VisualViewport.html

MDN VisualViewport

http://www.alloyteam.com/2020/02/14265/