稍微滚动，直到 safari 最小化地址栏，然后单击“下一步”。您可以看到底部栏被遮挡。再次尝试滚动，底部栏恢复其位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = document.getElementById('app');
const state = new Proxy(
{
currentPage: 1,
},
{
set(obj, key, value) {
if (key === 'currentPage') {
if (value === 1) app.innerHTML = Page1;
if (value === 2) app.innerHTML = Page2;
window.scrollTo(0, 0);
}
obj[key] = value;
return true;
},
}
);
const Stepper = `
<div class="fixed bottom-0 w-full justify-between flex px-10 left-0 right-0 h-20 bg-red-500">
<button onclick="setCurrentPage(state.currentPage - 1)">
Back
</button>
<button onclick="setCurrentPage(state.currentPage + 1)">
Next
</button>
</div>`;
const Page1 = `
<h1 class="text-7xl font-bold">You're currently on page 1</h1>
<div class="h-[1920px] w-full bg-grey-100"></div>
${Stepper}`;
const Page2 = `
<h1 class="text-7xl font-bold">You're currently on page 2</h1>
<div class="h-[1920px] w-full bg-grey-100"></div>
${Stepper}
`;
const setCurrentPage = (page) =>
(state.currentPage = Math.min(2, Math.max(1, page)));
setCurrentPage(state.currentPage);
</script>
</body>
</html>
在此处查看实际操作：https://streamable.com/shm9vd
自己尝试一下：https://magnificent-horse-ecfe4e.netlify.app/
有办法解决这个问题吗？谢谢。