屏幕尺寸更改且浏览器中导航栏切换时出现滚动对齐问题

Question

我在我的网络项目中遇到了滚动捕捉问题。每当屏幕尺寸发生变化时，例如当移动浏览器导航栏打开或关闭时，滚动捕捉行为就会变得混乱。即使我返回页面顶部，快照也无法正常工作。我已经为此苦苦挣扎了几天，但还没有找到解决方案。有人可以帮我解决这个问题吗？

这是我正在使用的代码示例：

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
main {
  max-width: 390px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
}
.container {
  top: 0;
  position: sticky !important;
  margin: auto;
  border-radius: 15px;
  height: 100lvh;
  max-width: 390px;
  width: 100%;
  font-size: 48px;
  scroll-snap-align: start;
  font-size: 48px;
}
.container:nth-child(1) {
  background-color: red;
}
.container:nth-child(2) {
  background-color: blue;
}
.container:nth-child(3) {
  background-color: bisque;
}
.container:nth-child(4) {
  background-color: rgb(0, 255, 0);
}
.container:nth-child(5) {
  background-color: rgb(0, 255, 242);
}

<main>
    <div class="container">1</div>
    <div class="container">2</div>
    <div class="container">3</div>
    <div class="container">4</div>
    <div class="container">5</div>
</main>

https://codepen.io/norouzy/pen/wvONEev
https://scroll-snap-smoky.vercel.app/

我正在寻求帮助，以了解即使浏览器导航栏已切换，如何保持滚动捕捉功能。任何见解或建议将不胜感激。谢谢！

Answer 1

我已经尝试实现堆叠卡效果很长时间了，我发现基于 Chromium 的浏览器存在错误，这是一个已知问题，并且报告了错误，https://issues.chromium.org /问题/41384643

Safari不存在此问题，因此您可能会部分实现该效果。