Bootstrap 3 - 尝试将动画滚动顶部与折叠速度相匹配答案

【问题标题】：Bootstrap 3 - Trying to match animate scrolltop to speed of collapseBootstrap 3 - 尝试将动画滚动顶部与折叠速度相匹配
【发布时间】：2016-08-11 03:18:31
【问题描述】：

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

我也有 jquery（动画到滚动顶部）在 hide.bs.collapse 事件时将窗口滚动到折叠面板的顶部。这也很好用。

我想要做的是将动画滚动顶部与引导折叠的速度相匹配，以便窗口随着折叠一起向上滚动。目前，根据动画的速度，窗口在折叠之前滚动或滞后。

不确定我的要求是否可行。感谢您的帮助。

【问题讨论】：

请发布您的代码
不幸的是我无法发布代码，所以我保持简单的问题。如果我能确定崩溃的速度，我应该能够对动画使用相同的值。除非两者不能同时进行。

标签： jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

好吧，经过一些调试，我确定实际发生崩溃的速度会因展开面板的大小而异。这可能是准确的陈述，也可能不是，但对时间的分析表明了这一点。

所以我会说不可能让滚动完全匹配每个面板折叠（如果大小不同），但我的大多数面板的大小都相当接近，所以我匹配平均速率，它可以按我喜欢的方式工作。

【讨论】：

【解决方案2】：

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

Buuuuut，这并不能回答你的问题。最好的办法是折叠面板，然后立即使用requestAnimationFrame 开始“轮询”。对于每个回调，您可以执行所需的计算以确定滚动位置应更改多少并手动设置滚动位置。这也是您对任何性能问题的最佳防御。这是一些伪代码：

somePanel.collapse();

let newPosition = 0;
function calculatePosition() {
  // calculate the new scroll position
  newPostion = doSomeFancyMathHere();
  window.requestAnimationFrame(setScroll);
}
function setScroll() {
  window.scrollTo(0, newPostion);
  if (window.scrollTop > 0) {
    window.requestAnimationFrame(calculatePosition);
  }
}
window.requestAnimationFrame(calculatePosition);'

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

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

【讨论】：