单个滚动捕捉点,在页面的最后一个部分之前具有视口底部

Question

我有一个关于CSS(资源,浏览器支持)中的捕捉点的问题.我想在整个身体内完全滚动,直到后面的"隐藏"部分.当用户滚动到第二个最后一个部分的底部时,视口应该与底部的底部对齐(与最后一个部分的顶部相同).当用户尝试滚动此一个快照时,应该只能通过克服特定阈值.

我已经将我的问题可视化以便更好地理解,我深深希望通过当前的捕捉点规范可以实现这一点.

Answer 1

这是我可以使用Alvaro Trigo的漂亮的库页面打桩:

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>

中间部分劫持滚动,然后您可以继续向第二部分滚动,第二部分再次像普通页面一样滚动.我无法添加阈值来访问中间部分.我把它留给你.祝好运!