文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使卷扣在以车身为滚动容器的FF中工作

问如何使卷扣在以车身为滚动容器的FF中工作
EN

Stack Overflow用户

提问于 2019-09-12 20:13:41

回答 2查看 1.5K关注 0票数 4

我试图有一个垂直滚动每一段(每一张照片描述)的页面。我还希望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

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-29 23:23:26

显然，更好的方法是将html元素设置为您的快照容器，而不是body。在这种情况下，滚动快照在FF和类似Chrome的浏览器中也是如此。但它在当前的Safari中停止工作。您可以通过将scroll-snap-type设置为两者来修复它。

另外，请注意，当前的Safari不支持scroll-margin，而是支持被废弃的scroll-snap-margin (希望在以后的版本中能够解决这个问题)。

所以我目前的解决办法是：

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

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

.scroll-snap .episode p {
  scroll-snap-align: start;
  scroll-margin: 8px;
  scroll-snap-margin: 8px; /* works in Safari */
}

票数 3

Stack Overflow用户

发布于 2019-09-30 07:19:27

好吧，我找到解决办法了。下面的代码使滚动抓取工作在火狐以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">这样的主体时，滚动快照将被打开，滚动将尝试在每个类名为episode的容器的每个<p>的启动上坚持。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57913914

复制

相似问题

问如何使卷扣在以车身为滚动容器的FF中工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使卷扣在以车身为滚动容器的FF中工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使卷扣在以车身为滚动容器的FF中工作
EN