html - @font-face 停止滚动捕捉点工作？

Question

我知道它仍然是非常新的和实验性的，但一直在玩 css scroll-snap，并且有一段时间无法让它工作。

我最终意识到，虽然我在我的 CSS 中使用了@font-face，但滚动对齐不起作用。如果我将字体系列更改为“Arial”而不是我定义的字体，它可以正常工作。

还有其他人遇到过这个吗？

代码笔:https://codepen.io/galvinben/pen/LgzLxK

@font-face {
  font-family: 'fontName';
  src: url('https://fontlibrary.org/assets/fonts/bebas/b98870e552991cf3daa1031f9fb5ec74/4c8d42e69711e4e230d9081694db00ce/BebasNeueLight.otf')
}

body {
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y proximity;
  font-family: 'fontName';
}

.section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


#one {
  background-color: #222;
}

#two {
  background-color: #333;
}

#three {
  background-color: #444;
}

#four {
  background-color: #555;
}

(更改字体系列后可能需要刷新页面才能看到它工作/不工作。)

Answer 1

我现在也遇到了这个问题。它似乎只影响 Chrome。

到目前为止，我能够绕过它的唯一方法是使滚动父元素成为主体以外的元素。然而，这并不理想，因为地址和工具栏缩小会导致您失去 native 移动功能。

无论如何，这是一个工作叉:https://codepen.io/treechime/pen/pxVeVr

html, body {
    height: 100%;
}

.wrapper {
    bottom: 0;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;

    scroll-snap-type: y mandatory;
}

.section {
    scroll-snap-align: start;
}

<div class="wrapper">
    <div class="section">one</div>
    <div class="section">two</div>
    <div class="section">three</div>
</div>

编辑:

在文档末尾通过 javascript 添加类似乎也可以解决问题，并且不必添加多余的元素。

body.snap {
    scroll-snap-type:y mandatory;
}

<script>document.body.classList.add('snap')</script>

或者不依赖 JS 来捕捉工作

body {
    scroll-snap-type:y mandatory;
}

body.fix {
    display:inline-block;
    width:100%;
}

<script>
    document.body.classList.add('fix');
    setTimeout(function() { document.body.classList.remove('fix'); }, 0);
</script>