如何获取可滚动图片列表当前展示图并高亮对应缩略图（Smarty环境）

我有一个可滚动图片列表，想要确定当前屏幕中展示的是哪张图片，目标是为当前图片对应的缩略图添加聚焦高亮效果。我使用的是Smarty模板引擎，原有实现代码如下：

{if $images}
<div class="galleryHolder left">
    <div class="thumbsHolder left">
        <div class="pos-sticky">
            {section name=i loop=$images}
            <a href="/files/{$images[i].file}" data-fancybox="gallery" class="thumb">
                <picture>
                    <source srcset="/files/webp/tntn/{$images[i].file_webp} 1x" type="image/webp">
                    <source srcset="/files/tntn/{$images[i].file} 1x" type="image/jpeg">
                    <img class="thumbImg" src="/files/tntn/{$images[i].file}" alt="{if $images[i].name}{$images[i].name}{else}{$row.name}{/if}">
                </picture>
            </a>
            {/section}
        </div>
    </div>
    <div class="imagesHolder right">
        {section name=i loop=$images}
        <a href="/files/{$images[i].file}" data-fancybox="gallery" class="full">
            <picture>
                <source srcset="/files/webp/{$images[i].file_webp} 1x" type="image/webp">
                <source srcset="/files/{$images[i].file} 1x" type="image/jpeg">
                <img class="fullImg" src="/files/{$images[i].file}" alt="{if $images[i].name}{$images[i].name}{else}{$row.name}{/if}">
            </picture>
        </a>
        {/section}
    </div>
</div>
{/if}

1. 调整模板代码，添加索引关联 #

给缩略图和大图元素都加上同序列的data-index属性，建立两者的对应关系，修改后的模板代码如下：

{if $images}
<div class="galleryHolder left">
    <div class="thumbsHolder left">
        <div class="pos-sticky">
            {section name=i loop=$images}
            <!-- 增加data-index属性绑定索引 -->
            <a href="/files/{$images[i].file}" data-fancybox="gallery" class="thumb" data-index="{$smarty.section.i.index}">
                <picture>
                    <source srcset="/files/webp/tntn/{$images[i].file_webp} 1x" type="image/webp">
                    <source srcset="/files/tntn/{$images[i].file} 1x" type="image/jpeg">
                    <img class="thumbImg" src="/files/tntn/{$images[i].file}" alt="{if $images[i].name}{$images[i].name}{else}{$row.name}{/if}">
                </picture>
            </a>
            {/section}
        </div>
    </div>
    <div class="imagesHolder right">
        {section name=i loop=$images}
        <!-- 增加data-index属性绑定索引 -->
        <a href="/files/{$images[i].file}" data-fancybox="gallery" class="full" data-index="{$smarty.section.i.index}">
            <picture>
                <source srcset="/files/webp/{$images[i].file_webp} 1x" type="image/webp">
                <source srcset="/files/{$images[i].file} 1x" type="image/jpeg">
                <img class="fullImg" src="/files/{$images[i].file}" alt="{if $images[i].name}{$images[i].name}{else}{$row.name}{/if}">
            </picture>
        </a>
        {/section}
    </div>
</div>
{/if}

2. 添加CSS高亮样式 #

自定义缩略图激活状态的样式，可根据需求调整：

.thumb {
  /* 原有样式不变，加过渡效果更顺滑 */
  transition: all 0.2s ease;
  border: 2px solid transparent;
  opacity: 0.7;
}
.thumb.active {
  /* 高亮样式 */
  border-color: #2563eb;
  opacity: 1;
}

3. 编写JS逻辑检测视口元素 #

使用IntersectionObserver检测当前进入视口的大图，性能远优于监听scroll事件，代码如下：

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有大图元素
  const fullImages = document.querySelectorAll('.full');
  // 获取所有缩略图元素
  const thumbs = document.querySelectorAll('.thumb');
  
  // 交集观察者配置
  const observerOptions = {
    root: null, // 以视口为根
    rootMargin: '0px',
    threshold: 0.6 // 大图60%进入视口就判定为当前展示图
  };

  // 观察者回调
  const observerCallback = (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 获取当前展示图的索引
        const activeIndex = entry.target.dataset.index;
        // 先清除所有缩略图的激活状态
        thumbs.forEach(thumb => thumb.classList.remove('active'));
        // 给对应索引的缩略图加激活状态
        document.querySelector(`.thumb[data-index="${activeIndex}"]`).classList.add('active');
      }
    });
  };

  // 初始化观察者
  const observer = new IntersectionObserver(observerCallback, observerOptions);
  // 给所有大图绑定观察者
  fullImages.forEach(img => observer.observe(img));
});

内容的提问来源于stack exchange，提问作者Dimitar Delyakov