CSS Scroll Snap doesn’t work

  • Resolved leakplan

    (@leakplan)


    2 years, 6 months ago

    Hi

    I want to set up scroll snap on my website so that the user can only scroll from one section to the next section. Unfortunately I can’t make it work.

    I set up my page in the wordpress editor like this: Cover block (css class: scroller) and a title and a paragraph block (together in a seperate group: scroller-content) inside the cover block. I added this structure three times on the page.

    This is my css code:

    .scroller {
    max-height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.scroller-content {
   scroll-snap-align: start;
}

    I noticed that the css properties “scroll-snap-type” and “scroll-snap-align” are marked red. There seems to be an issue there but I couldn’t find out what it is. I use the astra theme (free version).

    Does anyone have an idea what the issue might be?

    Thank you!

    • This topic was modified 2 years, 6 months ago by Jan Dembowski.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    Marked red by the editor’s code linter? It’s a property that the linter doesn’t recognize, or maybe because it’s not universally supported (only partial support in IE). Red doesn’t necessarily mean it’s certainly invalid. It should still save as written and be applied to applicable elements. Use your browser’s element inspector tool to confirm.

    If the code appears correctly in the inspector tool, whatever difficulty you’re having goes beyond the linter not liking the properties. If a live link to the page with the problem were available, someone here might take a look and be able to see what the issue might be.

    Thread Starter leakplan

    (@leakplan)

    I found out what the problem was: I used the wrong structure. The main container had to be html and the content had to be the whole section (not the content in the section itself) -> class: .scroller

    My final CSS code (with space for the sticky header) is:

    html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.scroller {
    height: 90vh;
    width: 100vw;
    scroll-snap-align: start;
}
    • This reply was modified 2 years, 6 months ago by leakplan.
    • This reply was modified 2 years, 6 months ago by leakplan.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Scroll Snap doesn’t work’ is closed to new replies.