Question

有没有办法在离子内容或离子滚动中使用CSS Scroll Sap Points？像这样：

-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-y: repeat(100%);

我想在离子幻灯片页面中使用水平离子幻灯片进行垂直全页滚动。

非常感谢任何帮助

Answer 1

现在很值得在2020年重新审视此问题，因为广泛支持滚动快照。我创建了一个可重用的垂直滚动类，如下所示：

.vertical-scroll {
  flex-basis: 50%;
  max-height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.vertical-scroll > * {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

然后将其放置在Ionic内容中，垂直滚动的子内容就是要滚动的项目，例如：

  const loadNews = () => {
    return (
      <div className="vertical-scroll">
        {[...Array(n)].map((e, i) => (
          <LatestNewsCard
            date="24 hours ago"
            title="UFC 'Halifax' results and play-by-play!"
            className="full-height"
            key={i}
          />
        ))}
      </div>
    );
  };

离子中的css滚动捕捉点

1 个答案: