Scrool Snap on SPPagebuilder sections - Forum | JoomShaper
Solved SP Page Builder

Scrool Snap on SPPagebuilder sections

Asked by Andrea 1 year ago Last activity 1 year ago

Hi,
Is it possible to use Scroll Snap on pagebuilder sections (to shows only one section at a time and it is not possible to stop the scroll betweens two sections) like : https://www.royalstgeorges.com/ - try to scroll with mouse wheel...
Eventually if pure css does not work, can you suggest a JS library to use insead ?
Thanks in advance.
Bye

Accepted answer

Marked as the solution
Ziaul Kabir Staff
1 year ago

You can try disabling the second scrollbar by modifying the overflow property. Instead of overflow-y: scroll;, set it to overflow: hidden; or overflow: auto; depending on your needs.

Try this update:

.snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: auto; /* Change from 'scroll' to 'auto' */
    height: 100vh;
}

If the second scrollbar is still appearing, it might be caused by another container inside .snap-container. In that case, check for nested elements with overflow settings and adjust accordingly.

Thanks

3 more replies

Oldest first Newest first Most helpful
Ziaul Kabir Staff
1 year ago

Hi Andrea,

Thanks for reaching out to us.

Maybe, you can implement CSS Scroll Snap on SP Page Builder sections to achieve the effect you described. Try adding the following CSS in your custom css:

.sp-page-builder .page-content {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.sp-page-builder .sppb-section {
    scroll-snap-align: start;
    min-height: 100vh;
}

This will ensure that each section snaps into place when scrolling.

If CSS alone doesn’t work as expected, you can consider using fullPage.js, which provides more control over full-page scrolling effects or you can research on google about this.

Best regards,

Andrea Asked this
1 year ago

Hi,
it seems to work but it destroys the layout of other elements. Is it possible to limit the snap-scroll to only some elements with a certain css class?

example
https://www.stefanato.com/test

Ziaul Kabir Staff
1 year ago

Yes, you can limit snap-scrolling to specific elements by applying scroll-snap-align only to elements with a certain class inside a scroll-snap-type container.

Example:

.snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}
.snap-element {
    scroll-snap-align: start;
}

Only .snap-element will snap while other elements remain unaffected.

Let me know if you need further tweaks.

Thanks

Log in to reply.