CSS滚动快照到达顶部时溢出主体

Question

我有一个很奇怪的问题。也许是unset($_SESSION['username']); 行为中的错误？

当我到达页面顶部并继续向上滚动时，如果我不再次向下滚动，则身体会溢出并停留在该位置。即使我重新加载页面。

仅在Mac版Chrome（版本75.0.3770.100（官方内部版本）（64位））中占据一席之地，我已经在Safari和Firefox中对其进行了测试，而且两者似乎都表现正常。

Reproduction online

Jsfiddle here，但您不能在那里复制它。可能是因为它位于iframe中？

问题的视频：

Answer 1

好了，在解决了对快速滚动的使用问题后，我寻找了类似的问题和解决方案，可能会添加以下内容：

html{
    height: 100%;
    overflow: hidden;
}
body{
    height: 100%;
    overflow: auto;
}

在某些情况下，仅此还不够，因此您还可以添加：

body{
    overscroll-behavior: none;
}

Answer 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>

Answer 3

您仅需再添加两行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;
 }

Here is your solution code

html,body,#container, .section, .slide{
            height: 100%;
            box-sizing:border-box;
     }

Answer 4

您需要添加过度滚动行为。这可控制您是否可以在网站内容的下方或上方滚动。通常用于具有“拉动刷新”功能的网站。在此处了解更多信息：https://developers.google.com/web/updates/2017/11/overscroll-behavior。

scroll-snap-type: y mandatory;    
overscroll-behavior-y: none;