15

这是真正的 JQuery UI 天才：我们有一个非常长的表单，其中包含按需加载的部分（例如，当单击索引/导航时，或者当我们滚动到当前部分的边缘附近时）。

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

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

我们正在考虑的选项：

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

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

对提议的解决方案有什么建议或意见？是否已经有滚动替换可以做到这一点？

如果您无法解决它，但认为它值得解决，请考虑投票，以便我可以对其进行大笔赏金！:)

4

1 回答 1

5

13 年 9 月 4 日更新

一旦您必须考虑诸如自动滚动以保持屏幕上的集中控制等因素，选项 4 在实践中就会变得太慢。

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

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

选项 1 的优点是当您更改项目之间的焦点（例如选项卡）时，它不会与浏览器的本机自动滚动发生冲突。事实证明，这是最好的实用解决方案，并且使我们能够生成一个“非常长”的表单，该表单由数十个动态加载的部分（通过导航链接或通过它们靠近视口的位置加载）组成，并且效果非常好。确实是康加！

早期测试：

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

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

为了满足手动滚动的需求，我们使用了MouseWheel.js，并且我们对滚动进行了限制，以便第一项和最后一项的范围受到视口顶部和底部 25% 的限制。

作为 JQuery 插件“排队”的内容，一个接一个，我们决定将其命名为Conga。:)

于 2013-08-27T15:51:01.890 回答