如何使主体作为滚动容器在FF中进行滚动捕捉

问题描述 投票:2回答:1

我正在尝试将一个具有垂直滚动的页面捕捉到每个段落(每个照片说明)。我也希望body是我的滚动容器,而不是div内部的某些body

我有:

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

.scroll-snap .episode p {
  scroll-snap-align: start;
  scroll-margin: 8px;
}

此功能在Chrome和Safari中非常有效,但在Firefox中不起作用。 Firefox检查器显示了应用于标签的这些CSS属性,但是滚动无法捕捉。

如何在不创建其他滚动容器的情况下使其在FF中工作?

css firefox scroll-snap
1个回答
0
投票

好,我找到了解决方案。以下代码使滚动捕捉在Firefox中以body为容器。

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: auto;
}

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

.scroll-snap .episode p {
  scroll-snap-align: start;
  scroll-margin: 8px;
}

然后,当您的身体像<body class="scroll-snap">时,将打开滚动捕捉,并且滚动将尝试停留在类名称为<p>的每个容器的每个episode的开头。

© www.soinside.com 2019 - 2024. All rights reserved.