到达顶部时CSS滚动捕捉溢出身体
Posted
技术标签:
【中文标题】到达顶部时CSS滚动捕捉溢出身体【英文标题】：CSS scroll-snaps overflows body when reaching top 【发布时间】：2019-11-10 08:14:37 【问题描述】：我遇到了一个很奇怪的问题。可能是 scroll-snaps 行为中的错误？
当我到达页面顶部并继续向上滚动时，如果我不再向下滚动，正文就会溢出并停留在那里。即使我重新加载页面。
仅在 Chrome for Mac（版本 75.0.3770.100（官方构建）（64 位））中进行，我在 Safari 和 Firefox 中对其进行了测试，两者似乎都表现正常。
Reproduction online
Jsfiddle here 但你不能在那里复制它。可能是因为它在 iframe 中？
问题视频：
【问题讨论】：
我用 另外，我注意到您的小提琴没有与网站相同的代码。 'scroll-snap-type: 强制；'部分需要在容器中，所以在 '.snaps' 和 'scroll-snap-align: start;'部分 n 该容器的子项，所以在这里，在“.sections”中。不知道它会修复它，因为我无法重现要测试的错误。在 @Salix，正如我所说，我认为我们无法在 iframe 中重现该问题。但是你能在我网站的链接上复制它吗？是的，它们没有完全相同的代码，因为在 jsfiddle 中我无法在不使用 JS 的情况下将类添加到<body> 元素。所以我改编了它。
不，它没有在网站上窃听。也许我有不同的铬寿。但从技术上讲，它应该从 chrome 69 开始得到支持，所以，idk。
@Salix，让我们忘记 jsfiddle 和 iframe :) 不要考虑它们。我不介意。我只是希望我的链接网站能够正常工作，而不需要 iframe。
【参考方案1】：
好吧，我寻找了类似的问题和解决方案，在修复了您对快速滚动的使用后，可以添加以下内容：
html
height: 100%;
overflow: hidden;
body
height: 100%;
overflow: auto;
在某些情况下，这显然是不够的，因此您还可以添加：
body
overscroll-behavior: none;
【讨论】：
只需添加html overflow:hidden 似乎就可以了！谢谢！
我已经向 Chrome 报告了，所以我希望他们将来会处理它:)
似乎是 ios 的东西，有时它似乎发生在 safari 上，但是，也许他们可以做一个解决方法或其他东西。
我的问题发生在桌面版 Chrome 中 :)
*MacOS 和 iOS，我的意思是这是苹果的问题 :P【参考方案2】：
也许，您应该尝试替换：
body
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
通过这个：
#container
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
overflow-y: scroll;
我在这里给你留下了另一个例子：
body
height: 100vh;
margin: 0;
.container
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100%;
.container div
scroll-snap-align: start;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
.container div:nth-child(1)
background: yellow;
color: black;
.container div:nth-child(2)
background: red;
color: white;
.container div:nth-child(3)
background: blue;
color: white;
.container div:nth-child(4)
background: green;
color: white;
<div class="container">
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
<div>Section 4</div>
</div>【讨论】：
没有解决问题。【参考方案3】：您只需添加两行 css 即可解决您的问题。将高度设为100% 到100vh 并给出box-sizing:border-box; 这将修复您的填充属性100%width 和height； box-sizing:border-box;。为什么我使用vh 整个视口高度的百分比。 10vh 将解析为当前视口高度的 10%，这将为您提供更多 responsive 的东西。但是，如果您想使用100%，这也适用于box-sizing:border-box;
html,body,#container, .section, .slide
height: 100vh;
box-sizing:border-box;
Here is your solution code
html,body,#container, .section, .slide
height: 100%;
box-sizing:border-box;
【讨论】：
不幸的是，这并不能解决问题。我仍然可以在 this page 上通过这些更改重现我的问题。【参考方案4】：您需要添加过度滚动行为。这控制您是否可以滚动到网站内容的下方或上方。通常用于具有“拉动刷新”的网站。在此处阅读更多信息：https://developers.google.com/web/updates/2017/11/overscroll-behavior。
scroll-snap-type: y mandatory;
overscroll-behavior-y: none;
【讨论】：
以上是关于到达顶部时CSS滚动捕捉溢出身体的主要内容，如果未能解决你的问题，请参考以下文章
打开将“溢出：隐藏”分配给正文的模式或窗口时，页面滚动到最顶部