离子中的CSS滚动捕捉点答案

【问题标题】：css scroll snap points in ionic离子中的CSS滚动捕捉点
【发布时间】：2020-03-16 08:23:19
【问题描述】：

有没有办法在 ionic-content 或 ion-scroll 中使用 CSS Scroll Sap Points？像这样的：

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

我想在离子幻灯片页面中有一些垂直的整页滚动（使用水平离子幻灯片）。

非常感谢任何帮助

【问题讨论】：

您的问题仅在于捕捉点，还是使用离子滑动设置垂直滚动？对于第一点，我建议阅读以下内容：css-tricks.com/introducing-css-scroll-snap-points（不完全支持快照点，您必须使用 polyfill）。其次，如果您遇到问题，我可以详细说明一个快速的答案。
谢谢。离子滑道中的垂直 scoll itsef 不是问题。我根本无法弄清楚如何在那里应用滚动捕捉点。由于我仅针对移动设备，因此在我的情况下不需要 polyfill。与此同时，我正在使用带有 paging="true" 的 ion-scroll，但这种分页感觉并不真正原生：<ion-view view-title="Scoll"> <ion-scroll zooming="false" direction="y" scrollbar-x="false" scrollbar-y="false" paging="true" style="width: 100vw; height: 100vh"> ...myContent here </ion-scroll> </ion-view>

标签： css ionic-framework

【解决方案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 Content 中，vertical-scroll 的子内容就是您要滚动的项目，例如：

  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>
    );
  };

【讨论】：