Bootstrap 3 - 尝试将动画滚动顶部与崩溃速度相匹配

Question

我正在使用Bootstrap 3并在一个面板组中有几个面板，并在每个面板上使用折叠。展开/折叠效果很好。

我还有jquery（动画滚动顶部），以便在hide.bs.collapse事件上将窗口滚动到折叠面板的顶部。这也很有效。

我正在尝试做的是将动画滚动顶部与引导程序崩溃的速度相匹配，以便窗口随着折叠向上滚动。目前，根据动画的速度，窗口在崩溃之前滚动或滞后于它。

不确定我的问题是否可行。谢谢你的帮助。

Answer 1

好吧，经过一些调试后，我确定崩溃发生的实际速率取决于扩展面板的大小。这可能是或不是准确的陈述，但对时间的分析表明。

所以我会说它不可能让滚动条完全匹配每个面板折叠（如果尺寸不同），但我的大多数面板尺寸相当接近，所以我匹配平均速率并且它可以作为我喜欢。

Answer 2

动画制作时滚动效果不佳。浏览器将在尝试滚动时绘制页面的大部分内容，这对于任何不在非常强大的机器上的人来说都不会好看（即所有移动设备和大多数笔记本电脑）。

Buuuuut，没有回答你的问题。你最好的办法是折叠面板，然后立即使用using(var scope = container.BeginLifetimeScope()) { var registration = RegistrationBuilder.ForType<ServiceA>() .As<IService>() .CreateRegistration(); scope.ComponentRegistry.Register(registration); scope.Resolve<IService>(); } 开始'轮询'。对于每个回调，您可以执行所需的计算，以确定滚动位置应更改多少并手动设置滚动位置。这也是您抵御任何性能问题的最佳方法。这是一些伪代码：

requestAnimationFrame

注意：我们正在进行计算和单独动画帧中的滚动，因为您的花哨数学计算将导致绘画发生。执行计算后，您将需要等到下一个动画帧才能滚动。

如果你的计算是正确的，那么在面板折叠中发生的任何缓和都应该通过滚动来模仿。