可展开块页面滚动问题：如何避免块消失后页面内容上移？

2024-03-03 21:35:25

在网页设计中，可展开块是一种常见的交互元素，它允许用户按需展开或折叠内容，从而提升页面信息的组织性和用户体验。然而，当用户关闭位于页面底部的可展开块时，页面会自动向上滚动，这可能会让用户感到困惑，甚至丢失他们之前浏览的内容。

这种现象的出现，是因为当可展开块关闭后，它原本占据的空间被释放，浏览器会自动调整页面布局，将后面的内容向上移动以填补空缺。这个过程会导致页面焦点发生变化，用户需要重新定位才能继续浏览。

为了解决这个问题，我们可以采用几种不同的技术手段。

方法一：利用 JavaScript 计算偏移量

这种方法的核心思想是，在关闭可展开块之前，先计算出它距离页面顶部的距离，然后在关闭块之后，使用 window.scrollTo() 方法将页面滚动到相同的位置。

// 获取可展开块元素
const expandableBlock = document.getElementById('myExpandableBlock');

// 获取关闭按钮元素
const closeButton = expandableBlock.querySelector('.close-button');

// 添加关闭按钮点击事件监听器
closeButton.addEventListener('click', () => {
  // 获取可展开块距离页面顶部的距离
  const offsetTop = expandableBlock.offsetTop;

  // 关闭可展开块
  expandableBlock.style.display = 'none';

  // 将页面滚动到之前的位置
  window.scrollTo(0, offsetTop);
});

这种方法的优点是简单易懂，不需要修改 HTML 结构。但缺点是，如果页面布局发生变化，例如调整了其他元素的高度，就需要重新计算偏移量。

方法二：使用锚点链接

锚点链接可以将页面滚动到特定元素的位置。我们可以利用这个特性，在可展开块的标题处添加一个锚点，然后在关闭按钮的点击事件中，触发锚点链接的跳转。

<div id="myExpandableBlock">
  <h2 id="blockTitle">可展开块标题</h2>
  <p>这里是可展开块的内容。</p>
  <button class="close-button">关闭</button>
</div>

<script>
// 获取关闭按钮元素
const closeButton = document.querySelector('#myExpandableBlock .close-button');

// 添加关闭按钮点击事件监听器
closeButton.addEventListener('click', () => {
  // 触发锚点链接跳转
  window.location.href = '#blockTitle';
});
</script>

这种方法的优点是不需要计算偏移量，页面布局变化也不会影响其效果。缺点是，页面会发生明显的跳转，用户体验可能不如方法一流畅。

方法三：使用 CSS 过渡效果

我们可以利用 CSS 过渡效果，使可展开块的高度逐渐变化，而不是瞬间消失，从而避免页面发生突兀的滚动。

#myExpandableBlock {
  transition: height 0.3s ease-in-out;
}

#myExpandableBlock.closed {
  height: 0;
  overflow: hidden;
}

// 获取可展开块元素
const expandableBlock = document.getElementById('myExpandableBlock');

// 获取关闭按钮元素
const closeButton = expandableBlock.querySelector('.close-button');

// 添加关闭按钮点击事件监听器
closeButton.addEventListener('click', () => {
  // 添加 closed 类，触发 CSS 过渡效果
  expandableBlock.classList.add('closed');
});