@ font-face停止滚动快照点工作？ [英] @font-face stops scroll-snap-points from working?

问题描述

我了解它仍然是非常新颖且实验性的，但是一直在使用css滚动捕捉，并且暂时无法使用它。

I understand it's still very new and experimental, but have been playing around with css scroll-snap, and couldn't get it to work for a while.

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

I eventually realised that whilst I am using @font-face in my css, scroll snap doesn't work. If I change the font-family to 'Arial' instead of my defined font, it works fine.

还有其他人遇到吗？

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;
}

（可能必须刷新页面以查看更改后是否有效字体家族。）

(May have to refresh the page to see it work/not work after changing font-family.)

推荐答案

目前，我对此也有疑问。看来这只会影响Chrome。

I'm having issues with this at the moment as well. It seems to only affect Chrome.

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

The only way I've been able to get around it so far is to make the scroll parent an element other than the body. This, however, is not ideal as you lose native mobile functionality with the shrinking address and tool bars.

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

Here's a working fork anyway: 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添加类似乎也可以解决问题，并且省去了添加多余元素的麻烦。

Adding a class via javascript at the end of the document seems to also do the trick and saves having to add superfluous elements.

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

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

或者不依赖JS进行工作

OR to not rely on JS for snapping to work

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>

这篇关于@ font-face停止滚动快照点工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！