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

Question

这里是一个真正的JQuery UI天才:我们有一个非常长的形式,按需加载部分(例如,当点击索引/导航时,或当我们在当前部分的边缘滚动时).

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

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

我们正在考虑的选项:

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

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

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

如果你无法解决它,但认为它值得解决,请考虑提升,这样我就可以获得大笔奖金!:)

Answer 1

一旦您必须考虑诸如自动滚动以将焦点控制在屏幕上之类的事情，选项 4 在实践中变得太慢了。

事实证明，只要您执行以下操作，选项 1就会起作用：

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

选项 1 的优点是当您在项目之间更改焦点（例如选项卡）时，它不会对抗浏览器的本机自动滚动。事实证明，这是最好的实用解决方案，并允许我们生成一个“非常长”的表单，其中包含数十个动态加载的部分（通过导航链接加载，或通过它们与视口的接近度加载），并且效果非常好。康加确实！

最初我们选择了选项 4：我们创建了自己的滚动条，并将绝对定位的项目布局在相对父项中。

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

为了满足手动滚动的需要，我们使用MouseWheel.js并设置滚动上限，以便第一个和最后一个项目的范围受到视口顶部和底部 25% 的限制。

由于 JQuery 插件一个接一个地“排列”内容，我们决定将其命名为Conga。:)