实用技能：实现横向元素居中滚动效果指南在网页开发中，用户体验至关重要。尤其在涉及内容滚动的情况下，如何让用户快速聚焦到他

在网页开发中，用户体验至关重要。尤其在涉及内容滚动的情况下，如何让用户快速聚焦到他们想要的内容，是提升用户体验的关键之一。本文将通过一个具体的例子，介绍如何使用JavaScript实现元素居中滚动的效果

场景：我们总能遇到需要横向滚动的卡片列表。如果卡片是可选择的，当用户点击其中一个卡片时，应该实现该卡片自动滚动到容器的中央位置，以提升用户体验和视觉效果。

这种实现效果通常被称为“元素居中滚动”或“元素居中平滑滚动”。在前端开发中，这种效果可以用来在滚动容器中使特定元素居中显示，提升用户体验。

效果图：

功能描述

我们将实现一个功能，当用户点击某个元素时，该元素会平滑滚动到容器的中央位置。这在图片轮播、列表导航等场景中都非常实用。

代码实现

首先，我们来看一下完整的代码：

function scrollToCenter(element) {
    const container = document.querySelector('.container');
    const containerRect = container.getBoundingClientRect(); // 获取容器的数据
    const elementRect = element.getBoundingClientRect(); // 获取卡片的数据
    const offset = elementRect.left - containerRect.left; // 偏移量
    const containerCenter = containerRect.width / 2; // 获取容器中间位置
    const elementCenter = elementRect.width / 2; // 获取卡片的中间位置
    // container.scrollLeft 容器滑动多少 +  offset 偏移值 + ( elementCenter到达卡片一半的位置 - containerCenter达到一半宽的位置)
    // ( elementCenter到达卡片一半的位置 - containerCenter达到一半宽的位置) == 卡片左头那个地方
    const scrollPos = container.scrollLeft + offset - containerCenter + elementCenter;

    container.scrollTo({
        left: scrollPos,
        behavior: 'smooth'
    });
}

代码详解

1. 获取容器和元素的尺寸：

   const container = document.querySelector('.container');
   const containerRect = container.getBoundingClientRect(); // 获取内容的大小
   const elementRect = element.getBoundingClientRect();
   

   我们首先通过 querySelector 获取滚动容器和目标元素，然后使用 getBoundingClientRect 获取它们的尺寸和位置.

   对!!!!!!getBoundingClientRect 要重点记住。

2. 计算偏移量：

   const offset = elementRect.left - containerRect.left;
   

   这里计算的是目标元素相对于容器的左边缘的偏移量。

3. 计算中心位置：

   const containerCenter = containerRect.width / 2; // 获取容器中间位置
   const elementCenter = elementRect.width / 2; // 获取卡片的中间位置
   

   这两行代码分别计算了容器和目标元素的中心位置。

4. 计算滚动位置：

   const scrollPos = container.scrollLeft + offset - containerCenter + elementCenter;
   

   这一步计算出目标元素居中时容器需要滚动到的位置。公式解释如下：

   • container.scrollLeft 是容器当前的滚动位置。
   • offset 是目标元素相对于容器的左边缘的偏移量。
   • containerCenter 和 elementCenter 分别是容器和元素的中心位置。

5. 执行平滑滚动：

   container.scrollTo({
       left: scrollPos,
       behavior: 'smooth'
   });
   

   最后，使用 scrollTo 方法进行平滑滚动。behavior: 'smooth' 表示滚动过程是平滑的。

实际应用

这种滚动效果在以下场景中非常有用：

• 图片轮播：点击缩略图时，图片自动滚动到中央位置。
• 列表导航：点击导航项时，相关内容自动居中显示。
• 表格操作：在宽表格中，点击单元格时，单元格自动滚动到视图中央，便于用户查看。