Javascript 当页面高度在运行时增加时，是否防止浏览器视口粘到底部？

现代浏览器似乎有一个特性，即当页面高度增加时，视口会贴到底。实际情况是，当初始位置位于（或非常接近）页面底部时，浏览器以与高度增加相同的速度滚动视口。这会使页面看起来像是向上扩展而不是向下扩展

如何使用CSS或JS禁用特定页面的此功能，使页面始终向下展开

当然，当添加的元素的高度展开时也会发生这种情况。因此，如果可能的话，我希望避免在之后重置滚动位置，以防止出现可见的跳跃。在下面的gif中可以看到该“功能”的演示（似乎只有在极少数情况下才会出现）与视口和放置动画交互

---

我知道一定有办法，否则每一个有无限卷轴的站点都会遭受无限循环的痛苦。反论点：对于超过一定高度限制的容器，Chrome似乎不会这样做。因此，也许无限滚动网站甚至不用在其网站中解决这个问题。

你的意思是，当你滚动到底部，并且添加了一段内容时，你会停留在底部吗？因为解决方案非常简单：

选择1

• 将当前滚动偏移量存储到顶部（例如向下滚动了多少像素）
• 添加新内容
• 将scrolloffset设置为存储值的顶部

最后两个步骤可以快速完成，用户不会注意到

选择2 不是100%确定这是有效的，但我猜它是有效的：

• 当访问者滚动到底部时，请始终将其向后滚动3倍。这样，它们就不会在添加新内容的位置处于底部，因此浏览器会停留在原来的位置

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

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

最后一个div不会捕捉到底部，因为滚动是相对于最后一个元素的上限进行的，并且最后一个元素正在增长

如果您想要一个不同的行为，我不建议使用Javascript处理它，但我建议您考虑这些规则来更改布局。例如，最后一个div应该是正在增长的div，而不是它以前的兄弟

强制性守则：

var div=document.querySelectorAll（'.growing'）；
var高度=500；
setInterval（函数（）{
高度+=100；
div[0]。style.height=height+'px'；
div[1]。style.height=height+'px'；
div[2]。style.height=height+'px'；
},1000);
.start、.end{
高度：110px；
}
.开始{
背景：红色；
}
.完{
背景：绿色；
}
.成长{
背景：黄色；
}
.cnt1、.cnt2、.cnt3{
溢出：自动；
边框：5px纯黑；
保证金：5px0；
滚动捕捉类型：必填；
}
.cnt1{
高度：100px；
}
.cnt2{
高度：120px；
}
.cnt3{
高度：100px；
}

内容
根据我对贵方要求的理解，我已提供了一个工作样本

希望对你有帮助

如果你期望更多的东西，请随意添加评论

酷


$（函数（）{
var高度=200；
var-pos=0；
setInterval（函数（）{
if（$（文档）.height（）>=$（窗口）.height（））{
变量高度=$（'.container1'）.height（）；
$（'.container1'）。高度（高度+20）；
pos=pos+20；
$（窗口）。滚动顶部（位置）；
}			
}, 1000);
});
.container1{
边框：1px实心#ccc；
最小高度：200px；
背景：#ccc；
高度：自动；
}

十一,

十二,

十三,

所有可拖动的元素都位于一个容器中，不会自动溢出，当您拖放元素时，整个页面会因拖动而滚动

与其这样做，不如：

<div class="container">
   <!-- Place all your draggable elements here -->
</div>

现在，当您拖放元素而不是整个页面时，唯一的容器将滚动

实施此解决方案后，它将如下所示

在拖动之前。

拖动时。

希望这对您有所帮助。
对于单击事件，请使用
blur
，避免
scrollTo
这个问题似乎与焦点有关。我遇到了一个类似的错误，当触发高度变化的元素被切换到一个不可聚焦的元素时，比如
div
，屏幕跳转消失了。这显然不是一个很好的解决方案，因为我们应该能够使用按钮！在这种奇怪的行为中，它还暗示了
focus
。进一步的实验导致在高度更改之前模糊触发器元素，这在不移动视口的情况下解决了问题。我只在点击事件中尝试过，所以我不确定它是否适用于拖放


功能手柄点击（e）{
e、 currentTarget.blur（）；
//更改高度的代码
}
您有没有举例说明这一点？我不记得见过这种行为。但是请注意，最近一些浏览器（Chrome和Safari IIRC）宣布，它们将尝试保持显示的相同位置（就内容而言），因此，如果您将内容添加到当前可见部分的上方，而不是下方，这将解释这种行为。不确定这是在当前版本中还是在将来的版本中。@jcaron我怀疑由于iframes，我是否能够创建小提琴。但我会看看我能做些什么。@jcaron请检查下面Gokhan Kurt回答中提供的小提琴。它演示了Chrome中的行为。此外，我还观察到，如果扩展元素
.container {
   max-height: 400px;
   overflow: auto;
}