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

Question

我知道它仍然是非常新的和试验性的，但是一直在使用css滚动快照，并且暂时无法使它工作。

我最终意识到，虽然我在CSS中使用@ font-face，但是滚动捕捉不起作用。如果我将字体系列更改为“ Arial”而不是我定义的字体，则效果很好。

还有其他人遇到吗？

Codepen：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。

到目前为止，我能够解决这个问题的唯一方法是使滚动父元素成为除主体之外的元素。然而，这并不理想，因为随着地址和工具栏的缩小，您会失去本机移动功能。

无论如何，这是一个工作叉：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>