我希望我的部分占据整个页面，只要用户向上或向下滚动，就会出现上一个/下一个部分。它在 Firefox 和 Chromium-Edge 上完美运行，但是当我在 Chrome 上测试它时，它总是跳过一个部分（从第 1 节到第 3 节，从第 3 节回到第 1 节）。我能做些什么来解决这个问题？
这是 HTML：
<div class="page container">
<div class="section section1">
...
</div>
<div class="section section1">
...
</div>
<div class="section section2">
...
</div>
<div class="section section3">
...
</div>
</div>
这是CSS：
.container{
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
/* Scroll Snap */
scroll-snap-type: y mandatory;
}
.section{
position: relative;
width: 100%;
height: 100%;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
}
如果有人想自己查看，这里是该网站：在 Firefox 和/或 Chrome …
一直在尝试滚动捕捉，看起来用 JS 编写功能可以省去很多麻烦。
这是一个挑战，有没有人找到一种方法来选择性地选择要捕捉哪些子项以及要自由滚动哪些子项？
我认为这对于内容丰富的页面非常有用，这些页面包含无法从滚动捕捉中受益的部分。
这是问题的示例： https://codepen.io/nodelondon/pen/YzxWqLG
html {
background: #f2f2f2;
}
.scroll-container,
.scroll-area-none,
.scroll-area {
max-width: 850px;
height: 600px;
font-size: 60px;
}
.scroll-area-none {
scroll-snap-align: none;
background-color: black;
}
.scroll-container {
overflow: auto;
scroll-snap-type: y mandatory;
}
.scroll-area {
scroll-snap-align: start;
}
.scroll-container,
.scroll-area-none,
.scroll-area {
margin: 0 auto;
}
.scroll-area-none,
.scroll-area {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.scroll-area:nth-of-type(4n+1) {
background: #49b293;
}
.scroll-area:nth-of-type(4n+2) {
background: #c94e4b;
}
.scroll-area:nth-of-type(4n+3) {
background: #4cc1be;
}
.scroll-area:nth-of-type(4n+4) { …我试图让网页滚动并在用户使用scroll-snap-type: y mandatory和滚动浏览网页时捕捉到某些元素的开头scroll-snap-align: start。我的问题是，这是一个很大的网页，与整个页面只是一个 div 和子项的许多示例不同，我有很多 div 和子项。如果我将 div 的直接容器限制为 100vh，滚动捕捉可以工作，但存在双重可滚动内容问题：文档滚动，内部 div 的捕捉内容独立于整个文档滚动。如果我不限制直接父母的身高，则捕捉不起作用。
这是一个示例： https: //codepen.io/canp/pen/abGJKXX
基本上，上面链接中的示例确实会卡住，但存在双滚动问题。我希望outer类 div 成为唯一的滚动组件，同时仍然捕捉到没有双滚动条的mid子pagediv 。
如何使文档滚动以捕捉到孙孙的开始位置？
当容器高于 100vh 时，我无法实现滚动捕捉点。我想使用强制捕捉点，但也允许用户在高度大于 100vh 时滚动。
我通过在我希望用户能够滚动浏览的位置添加额外的捕捉点来完成这项工作，而无需捕捉到高于 100vh 的 div 的顶部。
.parent {
min-height: 100vh; //actual is taller than 100vh
scroll-snap-align: start;
}
.child {
scroll-snap-align: center;
}
我希望能够自然地在一个高容器中滚动，而不必总是在滚动时捕捉到顶部。这种在 Chrome 中有效，但在 Safari 中，任何溢出都会使用户回到父级的顶部。有没有办法在高于窗口高度的容器上使用捕捉点，同时能够滚动溢出？
我试图让一个垂直滚动的页面与每个段落（每个照片描述）对齐。我也想body成为我的滚动容器，而不是div里面的一些body。
我有：
body.scroll-snap {
scroll-snap-type: y proximity;
}
.scroll-snap .episode p {
scroll-snap-align: start;
scroll-margin: 8px;
}
这在 Chrome 和 Safari 中完美运行，但在 Firefox 中不起作用。Firefox 检查器显示了应用于标签的这些 CSS 属性，但滚动不对齐。
如何使其在 FF 中工作而不创建额外的滚动容器？
请检查此CodePen。那里描述了问题。还有一个演示。我已经在 Mac 和 Windows 上测试过它。
Chrome（Mac 和 Windows 上）中也有相同的行为。
与此同时，其他浏览器（甚至是基于WebKit的 Safari 和Opera）也不会立即跳转到最近的捕捉点。
这是一个错误吗？
如果是这样，我可以在哪里举报？或者我可以询问的正确位置（WebKit 相关）是什么？
// Snippet of code required by Stack Overflow to post a question
slider.addEventListener("scroll", _.debounce((e) => {
const currentHeight = parseFloat(e.target.style["height"]);
e.target.style["height"] = currentHeight + (flag ? 5 : -5) + "px";
flag = !flag;
}, 50));
我用 HTML 制作了这款 iPhone（请不要注意意大利面条式的代码，它是德文的，如果需要我可以很乐意翻译它）：
var time = document.getElementById("time");
var notification = document.getElementById("notification");
var notificationHeader = document.getElementById("notificationHeader");
var notificationDescription = document.getElementById("notificationDescription");
var verificationCode = Math.floor(1000 + Math.random() * 9000);
var input = document.getElementById("instagramNumberText");
var correctOrWrongCheck = document.getElementById("correctOrWrongCheck");
var verificationCodePTag = document.getElementById("verificationCode");
var instagram = document.getElementById("instagramApp");
var mail = document.getElementById("mailApp");
var createAccountButton = document.getElementById("createAccount");
var createAccountForm = document.getElementById("createAccountForm");
var verificationCodeInstagramPage = document.getElementById("verificationCodeInstagramPage");
var controlVerificationCodeButton = document.getElementById("controlVerificationCode");
var continueToInstagramAccountButton = document.getElementById("continueToInstagramAccount");
var verificationCodeEmailDescription = document.getElementById("verificationCodeEmailDescription");
var verificationCodeEmail = document.getElementById("verificationCodeEmail");
var erfolgreichAngemeldet = document.getElementById("erfolgreichAngemeldet"); …我正在尝试使用CSSscroll-snap实现全尺寸浏览器视口滚动。但是Android上的Chrome存在一个问题（在91版本中测试）：当地址栏移动时（第一次滚动或滚动方向改变时）滚动元素可以摇动或/和滚动部分\xe2\x80\x94\xc2\ xa0没有到达正确的元素点。请查看代码片段。
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Document</title>\n</head>\n<body>\n <div class="wrapper">\n <div class="wrapper__el" style="background: green">1</div>\n <div class="wrapper__el">2</div>\n <div class="wrapper__el" style="background: green">3</div>\n <div class="wrapper__el">4</div>\n <div class="wrapper__el" style="background: green">5</div>\n <div class="wrapper__el">6</div>\n <div class="wrapper__el" style="background: green">7</div>\n <div class="wrapper__el">8</div>\n <div class="wrapper__el" style="background: green">9</div>\n </div>\n \n <style>\n html, body {\n height: 100%;\n margin: 0;\n }\n .wrapper {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n scroll-snap-type: mandatory;\n scroll-snap-type: y mandatory;\n overflow: scroll;\n …我尝试使用滚动快照功能，但它不起作用。我很困惑 - 我做错了什么？
HTML：
<!doctype html>
<html>
<body>
<div class="section" style="background-color: peachpuff">
<h2>Headline</h2>
<p>My Text</p>
</div>
<div class="section">
<h2>another Headline</h2>
<p>Another line of text</p>
</div>
<div class="section" style="background-color: peachpuff">
<h2>next Headline</h2>
<p>Text line - lorem ipsum and stuff</p>
</div>
<div class="section">
<h1>THE END OF THE SCROLL</h1>
</div>
</body>
</html>
CSS：
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
width: 80%;
margin: auto;
scroll-snap-type: y mandatory;
}
h1, h2{
font-family: 'Trebuchet MS', 'Lucida …