Container inside react component
Closed this issue · 11 comments
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'
});
}
Is your DOM node a scrolling div?
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.
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
I really like that idea!
Do you have a demo page I can look at?
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?
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.
So is in not possible to have non snap-able section when the container is the body? Could really use your help...
All good, just had to rework your code. thx
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?
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?