前端异步加载分页数据，怎么优雅展现

[123s]

分页是前端做的，我一次 load20 条数据，先展示 10 条，到底部再加 10 条。问题来了，怎么让页面不会抖一下呢？

[morning]

https://datatables.net/ 用这个？

[murmur]

抖一下是什么 你没用 append 直接清除原来的行然后重绘么？

[123s]

@murmur 我是 append 进去，原来的没有清除啊

[123s]

@morning 额，不用插件

[rekulas]

append 元素页面不会发生抖动的，只有滚动条位置会重置下，发生抖动应该是代码有问题，排除 bug 即可

[123s]

@murmur 是高度增加了，所以感觉滚动条会动一下

[123s]

@rekulas 滚动条也几乎在原来的位置，抖得不明显，只是有强迫症。有没有办法完全不动？

[123s]

@rekulas 可能我说得不清，没有抖，是动了一下。

[ziki]

@123s 滚动条变短这个你破不了吧

[loading]

是第一次没有滚动条，然后 20 条出现了滚动条导致页面变窄？

[rekulas]

@123s 没明白你的意思 高度增加了滚动条位置肯定要变的 为什么要让它不动？

[123s]

@rekulas 好吧。是我多想了，不可能不变短的。
@ziki

[rekulas]

@123s 你如果觉得突然变化无法接受那只能自己实现滚动条，屏蔽浏览器自己的滚动条，然后借助滚动条插件来实现，可以位置渐变视觉效果不错，不过个人感觉对大部分人来说这个意识不大

[123s]

@rekulas 我猜是在滚动下去的时候，有一个速度。这时再插东西就会改变。好吧，反正不是太明显，就这样算了。

[BOYPT]

去 twitter 看看就知道了

[123s]

@BOYPT 对，就是这种效果。我怎么看不出来

[BOYPT]

@123s twitter 的是靠近底部就更新吧？
我也实现过类似的功能，更新时候页面没有动：

if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { xxxxxx }

[123s]

@BOYPT 我也是这样的。

[BOYPT]

@123s 那要不你改成插入到 dom 后是 display:none 的，然后用个 slideDown 慢慢放出来看看是哪里抖动了

[123s]

@BOYPT

[123s]

@123s 手抖，我看其他浏览器好像没问题。 mac 下的 chrome 有点抖，不是很明显。