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

Question

I have a question concerning snapping-points in CSS (resource, browser-support). I want to scroll completely normal throughout the body until a latter "hidden" section. When the user scrolls to the bottom of the second last section the viewport should snap with the bottom to the bottom of this section (same as the top of the last section). When the user tries to scroll through this one snap it should be only possible by overcoming a specific threshold.

I have visualized my issue for better understanding, I deeply hope this is possible with the current specification of snapping-points.

If you can provide a working fiddle or snippet, of course :) @FaustoNA — Dennis Zoma, Jan 17 '16 at 12:05
Two questions: is this meant to be supported in all major browsers? And have you tried to solve it yet? If so, I would like to see the progress and maybe I can build up on it. — fnune, Jan 17 '16 at 12:10

score 5 · Accepted Answer · answered Jan 17 '16 at 14:34

This is as far as I could get it using Alvaro Trigo's nice library pagePiling:

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

The content is organized like so:

<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>

The middle section hijacks the scrolling, and afterwards you can continue scrolling towards the second section, which scrolls like a normal page again. I haven't been able to add a threshold to access the middle section. I leave it up to you there. Good luck!

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

1 Answers1