在十多年没有接触过 HTML 之后，我一直在尝试重新为一个业余项目重新编写小型 HTML 代码。具体来说，我想制作一个小的滚动捕捉效果。我想尽可能保持内联，因为我正在尝试帮助一位使用 Wordpress.com 的朋友，根据他告诉我的情况以及我检查过的情况，该网站实际上不允许使用 CSS 或 JS。
所以我想我应该让它尽可能简单。
<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>
那么，问题出在哪里呢？问题是……很多。使用 Firefox 时，它在 W3Schools 和 Codepen 上运行得很好，但根本无法在 Wordpress.com 上运行。另一方面，如果通过 MS Edge 运行，它也无法在 WP.com 上运行。不过，如果我通过 Edge 运行 W3Schools 和 Codepen，它会半工作，但在新部分开始之前会错开几个像素。
我尝试过使用供应商前缀对此代码进行一些变体，但没有成功。
我确信代码也太长且效率低下（对我来说已经有一段时间了），因此任何帮助将不胜感激。预先感谢。