javascript - 当页面高度在运行时增加时，防止浏览器视口(viewport)粘在底部？

Question

现代浏览器似乎有一个功能，当页面高度增加时，视口(viewport)会粘在底部。实际发生的是，当初始位置位于(或非常接近)页面底部时，浏览器以与高度增加相同的速率滚动视口(viewport)。这导致页面看起来像是向上扩展而不是向下扩展。

如何使用 CSS 或 JS 为特定页面禁用此功能，以便页面始终在视觉上向下扩展？

当然，当添加的元素的高度被展开动画时也会发生这种情况。出于这个原因，如果可能的话，我想避免之后重置滚动位置以防止可见跳转。可以在下面的 gif 中观察到此“功能”(似乎只在极少数情况下发生)与视口(viewport)交互和放置动画的演示。

我知道一定有办法，否则每个无限滚动的网站都会陷入无限循环。反驳论点:Chrome 似乎不会对超过特定高度限制的容器执行此操作。因此，也许无限滚动网站甚至懒得在他们的网站中解决这个问题。

Answer 1

检查这个fiddle .您可以观察到，在 Chrome 中，第一个容器捕捉到底部，而其他 div 相对于顶部滚动。在 Firefox 或 IE 11 中，您无法观察到此行为。

当滚动容器上最后一个元素的上边界高于容器的上边界时，就会发生这种情况。浏览器确定最后一个元素是用户感兴趣的内容，并决定留在该位置。

最后一个 div 没有对齐到底部，因为滚动发生在相对于最后一个元素的顶部边界并且最后一个元素正在增长。

如果您想要不同的行为，我不建议使用 Javascript 处理它，但我会建议根据这些规则更改您的布局。例如，最后一个 div 应该是增长的，而不是它之前的 sibling 。

必填代码:

var div = document.querySelectorAll('.growing');
var height = 500;

setInterval(function(){
	height += 100; 
	div[0].style.height = height + 'px';
	div[1].style.height = height + 'px';
  div[2].style.height = height + 'px';
},1000);

.start, .end{
  height: 110px;
}
.start{
  background: red;
}
.end{
  background: green;
}
.growing{
  background: yellow;
}
.cnt1,.cnt2,.cnt3{
  overflow: auto;
  border: 5px solid black;
  margin: 5px 0;
  scroll-snap-type: mandatory;
}
.cnt1{
  height: 100px;
}

.cnt2{
  height: 120px;
}

.cnt3{
  height: 100px;
}

<div class="cnt1">
  <div class="start"></div>
  <div class="growing"></div>
  <div class="end"></div>
</div>
<div class="cnt2">
  <div class="start"></div>
  <div class="growing"></div>
  <div class="end"></div>
</div>

<div class="cnt3">
  <div class="start"></div>
  <div class="end"></div>
  <div class="growing">
    Content
  </div>
</div>

编辑: 如果 growing div 的边界在可见区域，则滚动是相对于 growing div 的顶部。所以你可以破解 CSS 来显示不断增长的 div，但实际上并没有显示它。

在此fiddle我使用了两种不同的 CSS hack。第一个是添加相同数量的负边距底部和正填充底部。第二个技巧是向不断增长的 div 添加一个 :after 元素，但隐藏它的可见性。