如何打造自动关闭且过渡平滑的折叠式面板？解决滚动故障的指南

2024-03-09 09:56:11

如何创建自动关闭且平滑过渡的折叠式面板：一个分步指南

引言

折叠式面板是一种重要的设计元素，可用于组织和显示内容，同时最大限度地减少混乱。然而，创建具有良好用户体验的折叠式面板可能会带来挑战，特别是当需要自动关闭功能时。本文将深入探讨如何在使用 JavaScript 和 CSS 的情况下创建自动关闭且平滑过渡的折叠式面板，同时解决常见的滚动故障问题。

问题定义

在创建折叠式面板时，可能会遇到以下问题：

自动关闭： 当一个折叠式面板打开时，另一个活动的面板无法自动关闭。
页面跳动： 在关闭折叠式面板时，页面会发生突然的跳动，导致滚动体验不佳。

解决方案：一个分步指南

要解决这些问题，我们需要采用一个分步的方法：

1. 使用平滑的滚动动画

为关闭的折叠式面板添加平滑的滚动动画，可以防止页面突然跳动。可以使用 CSS transition 或 animation 属性来实现此目的。

2. 调整折叠式面板的高度

在关闭折叠式面板之前，先调整其高度为 0，然后关闭。这将防止页面在调整高度时跳动。

3. 调整页面滚动

关闭折叠式面板后，调整页面滚动位置，使内容显示在可见区域。可以使用 scrollIntoView() 方法或手动调整 scrollTop 属性来实现此目的。

代码示例

以下是一个代码示例，演示了如何实现这些步骤：

if (dropdownHeader) {
  if (!dropdown.classList.contains('process__item_active')) {
    closeAllItems();
    dropdown.classList.add('process__item_active');
    content.style.maxHeight = content.scrollHeight + 'px';
  } else {
    content.style.transition = 'max-height 0.5s ease-in-out';
    content.style.height = '0';
    dropdown.classList.remove('process__item_active');
    content.scrollIntoView({ behavior: 'smooth' });
  }
}

function closeAllItems() {
  accItems.forEach((item) => {
    item.classList.remove('process__item_active');
    item.querySelector('.process__item-wrapper').style.maxHeight = 0;
  });
}