equivalent to scroll-snap-align: end? use case = small section on bottom

[capi1O]

I am successfully using scroll-snap on a React project however I need to have a footer on bottom which can be scrolled to without scrolling backup automatically, as it happens now with my current setup, see example here => https://codesandbox.io/s/scroll-snap-react-forked-3rmqs?file=/src/index.js

When I was using CSS scroll-snap I was using scroll-snap-align: end; on the sections to avoid this problem but there is no such option in scroll-snap config. Any idea? Moving the footer out of the snap container is not an option as it needs to appear only when scrolled.

[capi1O]

I did a PR to allow this. This works by specifying a point after which the snapping is disabled (scrolling will be normal/free). Ex:

const scrollSnapConfig = {
	snapDestinationY: '100vh', // interval between snap points
	lastSnapPointY: 3, // scroll freely passed this snap point
};

I published it on npm so you can try it by npm install scroll-snap-last-point-fork and import ScrollSnap from 'scroll-snap-last-point-fork';

[lucafalasco]

Thanks for your suggestion @didrip. I think this could be a useful addition, though I'm wondering if the same could be achieved by using css alone, by moving the footer out of the main scrolling container. Maybe something like this.
Let me think about this 🤔

[capi1O]

Yes I tried the solution you proposed but I could not find a way to achieve the desired scrolling behavior (as shown in your example) without the double scrollbar...

[capi1O]

More generally we could have the option to pass an array of snap destinations instead of one, so we could "snap to sections" of different sizes. Such an option will work in my use case and also be good for others I think (I don't know if someone already requested that feature). What do you think?

Initially this is what I had tried to PR but I could not get it working.