我正在尝试将一个具有垂直滚动的页面捕捉到每个段落(每个照片说明)。我也希望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中工作?
好,我找到了解决方案。以下代码使滚动捕捉在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
的开头。