CSS scroll-snaps 到达顶部时溢出 body
CSS scroll-snaps overflows body when reaching top
我遇到了一个很奇怪的问题。也许是 scroll-snaps
行为中的错误?
当我到达页面顶部并继续向上滚动时,如果我不再向下滚动,正文就会溢出并停留在那里。即使我重新加载页面。
仅在 Chrome 中发生 Mac(版本 75.0.3770.100(官方构建)(64 位))我已经在 Safari 和 Firefox 中对其进行了测试,两者似乎都正常.
Jsfiddle here 但你不能在那里复制它。可能是因为它在 iframe 中?
问题视频:
好吧,我寻找了类似的问题和解决方案,在修复了您对 snap-scrolling 的使用后,可以添加以下内容:
html{
height: 100%;
overflow: hidden;
}
body{
height: 100%;
overflow: auto;
}
在某些情况下,这显然不够,所以您还可以添加:
body{
overscroll-behavior: none;
}
也许,你应该尝试替换:
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>
只需再添加两行 css 即可解决您的问题。将高度设置为 100%
到 100vh
并给出 box-sizing:border-box;
这将修复您的填充 属性 100%
宽度和高度; box-sizing:border-box;。为什么我使用 vh
全视口高度的百分比。 10vh 将解析为当前视口高度的 10%,这将为您提供更多 responsive
东西。但是如果你想使用 100%
这也适用于 box-sizing:border-box;
html,body,#container, .section, .slide{
height: 100vh;
box-sizing:border-box;
}
html,body,#container, .section, .slide{
height: 100%;
box-sizing:border-box;
}
您需要添加过度滚动行为。这控制您是否可以滚动到网站内容的下方或上方。通常用于 'pull to refresh' 的站点。在此处阅读更多内容:https://developers.google.com/web/updates/2017/11/overscroll-behavior。
scroll-snap-type: y mandatory;
overscroll-behavior-y: none;
我遇到了一个很奇怪的问题。也许是 scroll-snaps
行为中的错误?
当我到达页面顶部并继续向上滚动时,如果我不再向下滚动,正文就会溢出并停留在那里。即使我重新加载页面。
仅在 Chrome 中发生 Mac(版本 75.0.3770.100(官方构建)(64 位))我已经在 Safari 和 Firefox 中对其进行了测试,两者似乎都正常.
Jsfiddle here 但你不能在那里复制它。可能是因为它在 iframe 中?
问题视频:
好吧,我寻找了类似的问题和解决方案,在修复了您对 snap-scrolling 的使用后,可以添加以下内容:
html{
height: 100%;
overflow: hidden;
}
body{
height: 100%;
overflow: auto;
}
在某些情况下,这显然不够,所以您还可以添加:
body{
overscroll-behavior: none;
}
也许,你应该尝试替换:
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>
只需再添加两行 css 即可解决您的问题。将高度设置为 100%
到 100vh
并给出 box-sizing:border-box;
这将修复您的填充 属性 100%
宽度和高度; box-sizing:border-box;。为什么我使用 vh
全视口高度的百分比。 10vh 将解析为当前视口高度的 10%,这将为您提供更多 responsive
东西。但是如果你想使用 100%
这也适用于 box-sizing:border-box;
html,body,#container, .section, .slide{
height: 100vh;
box-sizing:border-box;
}
html,body,#container, .section, .slide{
height: 100%;
box-sizing:border-box;
}
您需要添加过度滚动行为。这控制您是否可以滚动到网站内容的下方或上方。通常用于 'pull to refresh' 的站点。在此处阅读更多内容:https://developers.google.com/web/updates/2017/11/overscroll-behavior。
scroll-snap-type: y mandatory;
overscroll-behavior-y: none;