高度变化导致组件抖动问题

如果组件在页面高度变化时发生抖动，可能是因为在每次计算组件位置时都触发了重新渲染，导致组件移动时出现抖动。

为了解决这个问题，可以使用requestAnimationFrame方法来优化组件位置的更新。requestAnimationFrame方法会在浏览器下一次重绘之前执行回调函数，这样可以确保更新发生在页面重新渲染之前。

以下是一个示例代码：

Copy

// 获取组件元素
const component = document.getElementById('your-component-id');

// 初始化组件位置
function setComponentPosition() {
  const windowHeight = window.innerHeight;
  const componentHeight = component.offsetHeight;
  const top = (windowHeight - componentHeight) / 2;
  component.style.top = `${top}px`;
}

// 更新组件位置
function updateComponentPosition() {
  const top = parseInt(component.style.top, 10);
  const windowHeight = window.innerHeight;
  const componentHeight = component.offsetHeight;
  
  // 如果组件的top值大于当前窗口高度减去组件高度，则重新计算top值
  if (top > windowHeight - componentHeight) {
    const newTop = (windowHeight - componentHeight) / 2;
    component.style.top = `${newTop}px`;
  }
}

// 使用requestAnimationFrame优化更新组件位置
let rafId;
function updateComponentPositionRAF() {
  cancelAnimationFrame(rafId);
  rafId = requestAnimationFrame(updateComponentPosition);
}

// 监听窗口大小变化事件
window.addEventListener('resize', updateComponentPositionRAF);

// 初始化组件位置
setComponentPosition();

在上述代码中，我们使用requestAnimationFrame方法包裹了updateComponentPosition函数，将其作为回调函数传递给requestAnimationFrame。这样在每次窗口大小变化时，updateComponentPosition函数将在浏览器下一次重绘之前执行，从而减少了组件的抖动。