Take advantage of this handy trick to scroll vertically or horizontally between fullscreen elements.
Choose the parent container you want the child elements to scroll into, set the size for the container and define its Overflow as Auto.
You can choose a Section to scroll Rows, a Column to scroll Modules…
Let’s scroll vertically some “Fullwidth Headers”!
We just need to identify a Divi “Fullwidth Section” as the parent container, and each “Fullwidth Header” inside as a child element.
- Paste this into Fullwidth Section > Advanced > CSS ID:
dd-container-y
- Paste this into each Fullwidth Header > Advanced > CSS Class:
dd-snap
- Paste this into your Page Settings > Advanced > Custom CSS::
#dd-container-y {
scroll-snap-type: y mandatory!important;
}
.dd-snap {
scroll-snap-align: end!important;
}
- Go to Divi > Theme Options, and disable Smooth Scrolling:
💡 Note that when the parent container is scrolled, it will snap to the child elements you’ve defined instead of scrolling your page content, so if you really want to keep scrolling your current page, you must limit the size (height or width) of the parent container avoiding making it fullscreen and leaving a margin around it to place the cursor in that area and continue scrolling the page.
🥳 That’s it!
Let’s scroll horizontally some “Fullwidth Headers”!
We just need to identify a Divi “Fullwidth Section” as the parent container, and each “Fullwidth Header” inside as a child element.
- Paste this into Fullwidth Section > Advanced > CSS ID:
dd-container-x
- Paste this into Fullwidth Section > Advanced > Main Element:
display: flex;
- Paste this into each Fullwidth Header > Advanced > CSS Class:
dd-snap
- Paste this into each Fullwidth Header > Advanced > Main Element:
flex: none;
- Paste this into your Page Settings > Advanced > Custom CSS::
#dd-container-x {
scroll-snap-type: x mandatory!important;
}
.dd-snap {
scroll-snap-align: end!important;
}
- Go to Divi > Theme Options, and disable Smooth Scrolling:
💡 Note that when the parent container is scrolled, it will snap to the child elements you’ve defined instead of scrolling your page content, so if you really want to keep scrolling your current page, you must limit the size (height or width) of the parent container avoiding making it fullscreen and leaving a margin around it to place the cursor in that area and continue scrolling the page.
🥳 That’s it!
Let’s scroll vertically regular “Sections”!
In case we want to scroll snap regular Sections, we just need to identify the “#et-main-area” as the parent container, and each “Section” inside as a child element.
- Paste this into each Section > Advanced > CSS Class:
dd-snap
- Paste this into your Page Settings > Advanced > Custom CSS::
#et-main-area {
scroll-snap-type: y mandatory!important;
height: 100vh;
overflow: auto;
}
.dd-snap {
scroll-snap-align: end!important;
}
🥳 That’s it!