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

it('should be able to change the state', () => {
  jest.spyOn(URLSearchParams, 'get');
  const wrapper = mount(
        <Concepts search="test" />
   );
});

编辑：

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

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>

或者不依赖JS进行工作

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

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

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

1 个答案: