在当前查看元素上方插入新区域时保持scrollTop（无毛刺） [英] Maintain scrollTop while inserting new sections above the current viewed elements (without glitching)

问题描述

下面是真正的JQuery用户界面天才之一：我们有一个非常长的窗体部分按需加载（例如，当点击索引/导航时，或者当我们在当前部分的边缘附近滚动时）。

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

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

我们正在考虑的选项：

1. 加载内容并将scrollTop位置调整为加载项的高度（这可能会非常糟糕，因为DOM更改可能比scrollTop调整慢得多）。 >
   
2. 在屏幕外加载新的部分，测量高度。然后插入该部分并调整scrollTop的数量（可能因为DOM更新而出现毛刺）。


3. 将要加载的部分设置为较大的固定高度（例如100/1000像素）并调整scrollTop以匹配，所以当前视图不会移动。将内容加载到该部分，然后测量实际的新内容高度，并在调整scrollTop以匹配实际高度时移除固定高度。 不要使用传统滚动，而是写一个自定义滚动条，保持自己的相对偏移量，并将现有的部分分开以适应新的部分。然后问题就变成了自定义滚动条替换（用于我们正在使用的nicescroll之类的东西）。


4. 将当前查看部分的位置暂时更改为绝对值（根据屏幕偏移）将其从流中取出。更新后面的父滚动窗口内容，然后在重新计算新的scrollTop后再次使相关部分相对。
   
5. 我们还没有想到的其他东西？

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

对建议解决方案的建议或评论？是否有滚动替换，这将已经这样做？

如果你解决不了，但认为它值得解决，考虑upvoting，所以我可以把

解决方案

Update 4 Sep 13

在实践中，选择4的速度太慢了，因为一旦您必须考虑诸如自动滚动以将焦点控制保持在屏幕之类的功能以外。

事实证明选项1 只要您执行以下操作即可使用：

• 添加顶部和底部填充符（例如空白div）以便浏览器接受较大的窗格（浏览器的自动滚动不考虑页边距），并且不能在scrollTop 0（浏览器中不存在负向滚动条）下滚动。


• 在插入内容时，首先调整仅影响项目的位置（即在视图中的目标位置的上方或下方）。
  
• 被做ch使所有项目的位置变大（将它们从0再次叠加）并更改scrollTop以匹配。如果只有几十个或更少的项目，这不会产生小故障，所以我强烈建议在顶层（比如部分）有更大的容器需要滚动，而它们的内容仍然是相对的。

选项1的优点在于，当您更改项目之间的焦点（例如选项卡）时，它不会与浏览器的本机自动滚动作斗争。这已经证明是最好的实际解决方案，并且允许我们生成由很多动态加载的部分组成的非常长的表格（通过导航链接加载，或者通过它们与视口的接近度），并且它的效果非常好。 Conga确实！

早期测试：

最初我们选择了4：我们已经创建了自己的滚动功能，并且我们将这些项目绝对定位在相对的父项目中。

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

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

随着JQuery加载项排队内容，我们一个接一个地决定将它称为 Conga 。 ：）

Here's one for the real JQuery UI geniuses: We have a extremely long form with sections loaded on demand (e.g. when an index/navigation is clicked, or as we scroll near the edges of the current section).

When I load sections below the currently viewed section, this does not affect the current scrolling (i.e. scrollTop) position, but when I insert new sections above the current viewed section it of course pushes the viewed content down.

We need to maintain the scrollTop position relative to the current section. We also need to avoid the display jumping/glitching while the adjustments are made.

Options we are considering:

1. Load the content and adjust the scrollTop position by the height of the loaded item (this will probably glitch badly as the DOM change is potentially much slower than the scrollTop adjustment).
2. Load the new section offscreen, measure the height. Then insert the section and adjust the scrollTop by that amount (probably still glitch because of the DOM update).
3. Set the section to be loaded to a large fixed height (e.g. 100/1000 pixels) and adjust the scrollTop to match so the current view does not move. Load the content into that section, then measure the actual new content height and remove the fixed height while adjusting the scrollTop to match the actual height.
4. Don't use traditional scrolling, but write a custom scroller that maintains its own relative offsets and moves existing sections apart to fit new ones. The problem then becomes writing a custom scrollbar replacement (for something like nicescroll which we are using).
5. Temporarily change the position of the current viewed section(s) to absolute (position calculated from the screen offset) to take it out of the flow. Update the parent scrolling window content behind it and then make the viewed section(s) relative again after recalculating the new scrollTop.
6. Something else we have not thought of?

I would like some suggestions from anyone that has actually had to solve this problem. It is important that the screen not glitch, so syncing scrollTop to a slow DOM update should be avoided.

Suggestions or comments on the proposed solutions? Is there a scroll replacement that would do this already?

If you can't solve it, but think it is worth solving, consider upvoting so I can put a large bounty on it! :)

解决方案

Update 4 Sep 13

Option 4 turns out to be too slow in practice once you have to take into account things like auto-scrolling to keep focused controls onscreen.

It turns out Option 1 will work so long as you do the following:

• Add top and bottom fillers (e.g. empty divs) so that the browser accepts the larger pane (margins are not taken into account by the browser's auto-scrolling) and you can't scroll below scrollTop 0 (no negative scrollTop in browsers).
• When inserting content, first adjust the position of only items that are affected (i.e. above or below the target position in the view.
• Once the adjustments are made change the position of all items (by stacking them from 0 again) and change the scrollTop to match. If there are only a few dozen items or less this will not glitch, so I strongly recommend having larger containers at the top level (like sections) that need to be scrolled, while their content remains relative.

Option 1 has the advantage that it does not fight the browser's native auto-scrolling when you change focus (e.g. tab) between items. This has turned out to be the best practical solution and has allowed us to produce a "very long" form consisting of dozens of dynamically loaded sections (loaded via navigation links, or via their proximity to viewport) and it works amazing well. Conga indeed!

Early testing:

Initially we went with option 4: We have created our own scrolling and we layout the items, absolutely positioned, within a relative parent.

When items change size the positions of item above or below are recalculated (depending on where they were relative to the viewport). This content change can be triggered by an Ajax load or manual change of size.

To cater for manual scrolling we are using MouseWheel.js and we are capping the scroll so that the extents of the first and last items are restricted by the top and bottom 25% of the viewport.

As the JQuery add-in "lines up" content, one after the other, we have decided to call it Conga. :)

这篇关于在当前查看元素上方插入新区域时保持scrollTop（无毛刺）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！