@font-face 阻止滚动捕捉点工作？答案

【问题标题】：@font-face stops scroll-snap-points from working?@font-face 阻止滚动捕捉点工作？
【发布时间】：2019-03-18 23:26:08
【问题描述】：

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

我最终意识到，当我在我的 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;
}

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

【问题讨论】：

这可能更多与浏览器兼容性有关developer.mozilla.org/en-US/docs/Web/CSS/…
不管它的价值如何，即使遵循 Chrome 文档，它仍然对我不起作用，已向 Chrome 提交了错误报告以供调查

标签： html css font-face scroll-snap-points

【解决方案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>

【讨论】：