单个 scroll-snap-point，视口底部位于页面最后一部分之前

Question

我有一个关于 CSS (resource, browser-support) 中的 snapping-points 的问题。我想在整个 body 中完全正常滚动，直到后面的 "hidden" 部分。当用户滚动到倒数第二个部分的底部时，视口应该与底部对齐到该部分的底部（与最后一个部分的顶部相同）。当用户试图滚动浏览这个快照时，只有克服特定的阈值才有可能。

为了更好地理解我的问题，我深切希望这在 snapping-points 的当前规范下是可能的。

Answer 1

这是我使用 Alvaro Trigo 的漂亮库所能得到的最大程度 pagePiling:

http://codepen.io/anon/pen/NxaeZm

内容组织如下：

<div id="pagepiling">
  <div class="section pp-scrollable" id="section1">
      <p>Content that scrolls normally</p>
    </div>

    <div class="section" id="hidden">
      <p>Not scrollable</p>
    </div>

    <div class="section pp-scrollable" id="section2">
      <p>Content that scrolls normally again</p>
    </div>

</div>

中间部分劫持了滚动，然后你可以继续滚动到第二部分，它再次像普通页面一样滚动。我无法添加访问中间部分的阈值。我把它留给你。祝你好运！

单个 scroll-snap-point，视口底部位于页面最后一部分之前

Single scroll-snap-point with bottom of viewport before the last section of the page

html

css

webkit

scroll-snap-points