Container inside react component

[BKengagement]

I am having a hard time with the container option. Could you please assist in helping me create a container? Not all my section will need to have a snap option.

componentDidMount() {
const node = ReactDOM.findDOMNode(this);
this.panelSnapInstance = new PanelSnap({
container: node,
panelSelector: '.panel'
});
}

[guidobouman]

Is your DOM node a scrolling div?

[BKengagement]

Yes I have the overflow as scroll. I am not getting any errors so it is finding the container. The scroll logic just doesn't work.

[BKengagement]

Ok, I got it to work with overflow:auto, and container height 100vh. The problem now is there are 2 scrollbars. I am trying to achieve something like this. https://ueno.co/careers#new-york-city

[guidobouman]

I really like that idea!

Do you have a demo page I can look at?

[BKengagement]

https://codesandbox.io/embed/yjo5y0mvlx

[guidobouman]

That's a bit of a small demo. Anything with your code in there already? Do you have content before or after the panels like the inspiration page you shared?

[BKengagement]

https://yjo5y0mvlx.codesandbox.io/

If I set the container to document.body the snap functionality only works until all sections leave the screen. It then says no snapable sections found.

If I set the container to a specific div and make it scrollable then there are 2 scrollbars that cause problems as you can see in the demo.

[BKengagement]

So is in not possible to have non snap-able section when the container is the body? Could really use your help...

[BKengagement]

All good, just had to rework your code. thx

[guidobouman]

Just wondering: what did you change? Changing the internals of a library is usually not a great idea. But is this something that should be in the library by default?

[guidobouman]

Ah, I see your case: you want to be able to scroll freely when there are no containers in the viewport.

Would adding an option to tell the plugin wether to force a snap or only snap when a panel is visible work for you?