工具栏遮挡

Safari的工具栏会叠加在页面之上遮挡内容，在页面整体滚动一定距离后自动收起，导致显示工具栏时使用100vh的页面显示不全。
可以通过js监听视口高度变化，动态设置页面的高度值。

1
2
3
4
5
6
const vh = window.innerHeight;
document.documentElement.style.setProperty('--vh', `${vh}px`)
window.addEventListener('resize', () => {
  const vh = window.innerHeight;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

过量滚动

页面滚动到最下时，会出现过量滚动，显示出空白部分，但有时候我们不希望出现这种效果。

1