Question

我正在编码一个网站（使用ajaxify.js和history.js），该网站在垂直滚动中包括不同的<section>，其宽度和高度在屏幕的100％上（在我的主页和另一页上）。

为了使导航更好一点，我使用了新的CSS快照滚动功能。它可以在Safari（v.12），Firefox（v.62）上正常工作。但是使用Chrome浏览器（第69版），它确实会出错。

实际上，当我的主页加载到Chrome上时，捕捉效果不起作用。因此，我去查看其他具有效果的页面，它仍然无法正常工作...但是，如果我返回访问我的主页（因为它位于Ajax中而没有重新加载该网站），则效果捕捉会起作用！

我正在将{snap“类应用于<body>标签（作为滚动容器），并且将” snap-section“类应用于<section>。

这是我的<body的CSS：

body {
  width: 100vw;
  overflow-y: scroll;

  -webkit-scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
      scroll-snap-type: mandatory;

  -webkit-scroll-snap-points-y: repeat(100vh);
    -ms-scroll-snap-points-y: repeat(100vh);
      scroll-snap-points-y: repeat(100vh);

  -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

每个<section>的CSS：

section.snap-section {
  position: relative;
  width: 100vw;
  height: 100vh;

  scroll-snap-align: start !important;
}

此错误使我发疯……我已经尝试了所有操作，例如删除Ajax，但仍然失败。感谢您的帮助！

Answer 1

我遇到了同样的问题。

找到解决方法，方法是在页面加载jquery之后才应用“ snap-type”属性。烦人的必须这样做，但是行得通。

尝试以下操作：

$('body').addClass('scroll-snap');

body {
  width: 100vw;
  overflow-y: scroll;
}
.scroll-snap {
  -webkit-scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
      scroll-snap-type: mandatory;

  -webkit-scroll-snap-points-y: repeat(100vh);
    -ms-scroll-snap-points-y: repeat(100vh);
      scroll-snap-points-y: repeat(100vh);

  -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

section.snap-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  
/* you can lose the !important */
  scroll-snap-align: start;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="snap-section" style="background-color:orange">
</section>
<section class="snap-section" style="background-color:yellow">
</section>
<section class="snap-section" style="background-color:red">
</section>
<section class="snap-section" style="background-color:blue">
</section>
</body>

Chrome加载页面后CSS Snap滚动失败

1 个答案: