Scroll Snap Broken on Mobile

[christianyipper]

Name: Scroll Snap Broken

Status: Resolved

Description: The scroll snap feature on mobile does not work and the user is unable to scroll through the page.

Steps to Reproduce:

1. Go to yipper.ca
2. Scroll through the page

Expected Result: User should be able to scroll up and down the page.

Actual Result: User is unable to scroll through the page and is stuck in their current position.

Configuration: iPhone 13: Chrome-Yes | Firefox-Yes | Edge-N/A Windows 10: Chrome-No | Firefox-No | Edge-No

Severity: Medium

Priority: Medium

Type: Bug

[christianyipper]

Solution

To resolve this issue, I created a mobile breakpoint for my ScrollSnap.js component. Then, I set the display to none and overflow to auto. This disables the scroll snap feature, making the page scroll regularly. Then, in the child element, I set the position to absolute and top to 0. This ensures that all the child elements inside scroll normally. Below is the code:

@media only screen and ( max-width: 500px ) {
    .scroll-wrap {
        display: none;
        overflow-y: auto;
        scroll-snap-type: none;
        overflow-x: hidden;
        pointer-events: none;

        .scroll-section {
            position: absolute;
            top: 0;

            &.scroll-show {
                display: block;
            }
        }
    }
}