在当前查看元素上方插入新部分时保持scrollTop（无毛刺）

Question

这是一个真正的JQuery UI天才：我们有一个非常长的形式，按需加载部分（例如，当点击索引/导航时，或当我们在当前部分的边缘滚动时）。

当我在当前查看的部分下面加载部分时，这不会影响当前滚动（即scrollTop）位置，但是当我在当前查看部分上方插入新部分时，它当然会将查看的内容推下来。

我们需要保持相对于当前部分的scrollTop位置。我们还需要在进行调整时避免显示跳跃/毛刺。

我们正在考虑的选项：

1. 加载内容并根据加载项目的高度调整scrollTop位置（这可能会因为DOM更改可能比scrollTop调整慢得多而出现故障）。
2. 在屏幕外加载新部分，测量高度。然后插入该部分并按该量调整scrollTop（由于DOM更新，可能仍然是毛刺）。
3. 将要加载的部分设置为较大的固定高度（例如100/1000像素）并调整scrollTop以匹配，以便当前视图不会移动。将内容加载到该部分，然后测量实际的新内容高度并删除固定高度，同时调整scrollTop以匹配实际高度。
4. 不要使用传统的滚动，而是编写一个自定义滚动条，保持自己的相对偏移并将现有的部分分开以适应新的部分。然后问题就是编写自定义滚动条替换（对于像我们正在使用的nicescroll这样的东西）。
5. 暂时将当前查看区域的位置更改为绝对位置（从屏幕偏移计算的位置），使其从流程中取出。更新其后面的父滚动窗口内容，然后在重新计算新的scrollTop后再次查看已查看的部分。
6. 我们还没有想到的其他东西？

我想要一些实际上必须解决这个问题的人的建议。重要的是屏幕不会出现故障，因此应该避免将scrollTop同步到缓慢的DOM更新。

对拟议解决方案的建议或意见？是否有可以执行此操作的滚动替换？

如果你无法解决它，但认为值得解决，请考虑提升，这样我就可以获得大笔奖金！：）

Answer 1

9月13日更新

一旦你不得不考虑像自动滚动这样的东西来保持屏幕上的聚焦控制，选项4在练习中会变得太慢。

结果选项1 只要您执行以下操作就会有效：

• 添加顶部和底部填充（例如空div），以便浏览器接受更大的窗格（浏览器的自动滚动不考虑边距），并且无法在scrollTop 0下滚动（在浏览器中没有负scrollTop） ）。
• 插入内容时，首先调整受影响项目的位置（即视图中目标位置的上方或下方。
• 进行调整后，更改所有项目的位置（再次将它们从0堆叠）并更改scrollTop以匹配。如果只有几十个或更少的项目，这不会出现故障，所以我强烈建议在顶层使用较大的容器（如部分），这些容器需要滚动，而它们的内容仍然是相对的。

选项1的优势在于，当您在项目之间更改焦点（例如制表符）时，它不会与浏览器的本机自动滚动作斗争。这已经证明是最好的实用解决方案，并且允许我们生成一个“非常长”的形式，包括数十个动态加载的部分（通过导航链接加载，或通过它们靠近视口），它的效果非常好。康加确实！

早期测试：

最初我们选择了选项4：我们已经创建了自己的滚动条，并且我们在相对父级内布置了绝对定位的项目。

当项目更改大小时，将重新计算项目上方或下方的位置（取决于它们相对于视口的位置）。可以通过Ajax加载或手动更改大小来触发此内容更改。

为了满足手动滚动我们正在使用MouseWheel.js，我们正在限制滚动，以便第一个和最后一个项目的范围受到视口顶部和底部25％的限制。

随着JQuery插件“排列”内容，一个接一个，我们决定将其称为 Conga 。 ：）