Search code examples
htmlfirefoxmicrosoft-edgescroll-snapwordpress.com

Several issues with scroll snap in HTML/CSS

I've been trying to get back into minor HTML coding for a side project, after not having touched HTML in well over a decade. Specifically, I wanted to make a small scroll snap effect. I wanted to keep it inline as much as possible since I'm trying to help a friend using Wordpress.com which, from what he's told me and I checked around, doesn't really allow CSS or JS.

So I thought I'd keep it as simple as I could remember.

    <body style="margin: 0;">
    <div class="scrollcontainer" style="scroll-snap-type: y mandatory; scroll-snap-points-y: repeat(100vh); height: 100vh; overflow-y: scroll;">
    <section class="scrollchild" style="scroll-snap-align: start; background-color: #eeeeee; height: 100vh;">
    <p style="padding: 0; margin: 0;">one</p>
    </section>
    <section class="scrollchild" style="scroll-snap-align: start; background-color: #aaaaaa; height: 100vh;">
    <p style="padding: 0; margin: 0;">two</p>
    </section>
    <section class="scrollchild" style="scroll-snap-align: start; background-color: #777777; height: 100vh;">
    <p style="padding: 0; margin: 0;">three</p>
    </section>
    </div>
    </body>

So, what's the problem? The problem is... a lot of them. When using Firefox, it runs great through W3Schools and Codepen, but won't run through Wordpress.com at all. On the other hand, it also doesn't work on WP.com if it's run through MS Edge. If I run W3Schools and Codepen though Edge, though, it semi-works but staggers several pixels before the start of the new section.

I've tried some variations of this code with vendor prefixes but to no avail.

I'm sure the code is also overly long and inefficient (it has been a while for me), so any help would be appreciated. Thanks in advance.

Solution

  • I tested the code you provided on both Firefox and Edge, and the scrolling effect works fine for my machine. The only difference is that scrolling seems to be faster and smoother on Firefox, while there is a slight delay on Edge.

    I also tested this code on W3Schools and Codepen respectively, but I can see here that the smooth scrolling and alignment of the page work well. I haven't seen the pixel staggering phenomenon you described.

    In addition, when I ran this code on WordPress.com, it did not work properly, so it can be considered that there is a compatibility difference between WordPress.com itself and CSS, and it is not caused by browser.