Scrool Snap On SPPagebuilder Sections - Question | JoomShaper
Back to the questions

Scrool Snap On SPPagebuilder Sections

A

Andrea

SP Page Builder 8 months 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

0
5 Answers
Order by
Oldest Newest Votes
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 8 months ago #183229

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,

0
A
Andrea
Accepted Answer
8 months ago #183619

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

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 8 months ago #183631

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

0
A
Andrea
Accepted Answer
8 months ago #183676

Hi, perfect, it works. Should be possibile to hide the second bar inside the scroll area? https://easycaptures.com/fs/uploaded/1741/0736538764.jpg Thanks in advance.

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 8 months ago #183707

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

0