JS实现lightbox当前图片对应缩略图始终在屏幕可视区域的方案咨询

1. 调整缩略图容器CSS #

首先需要修改缩略图外层容器的样式，让它支持横向滚动，同时隐藏默认滚动条不影响视觉效果：

.column-inside-row {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    /* 移除原有的justify-content: center，避免滚动时位置偏移 */
    flex-wrap: nowrap;
    z-index: 11;
    /* 新增以下属性 */
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-padding-inline: 20px; /* 滚动后左右留边，避免缩略图贴边 */
    padding: 10px 20px; /* 上下左右留边 */
    box-sizing: border-box;
}
/* 隐藏滚动条，兼容各浏览器 */
.column-inside-row::-webkit-scrollbar {
    display: none;
}
.column-inside-row {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.column-inside {
    margin: 0px 2px;
    flex-shrink: 0; /* 禁止缩略图被压缩 */
    width: 80px; /* 固定缩略图宽度，可按需调整 */
}
.demo:hover {
    transform: scale(105%);
    transition: .3s ease-out;
}
/* 可选：当前选中缩略图高亮样式 */
.demo.active {
    border: 2px solid #fff;
    opacity: 1;
}
.demo {
    opacity: 0.7;
    transition: .3s ease;
}

2. 新增JS控制逻辑 #

核心使用原生scrollIntoView()API实现自动滚动，在每次切换幻灯片时触发，无需引入第三方库。你可以直接把以下代码加入到你的JS文件中，替换你现有的空函数：

let slideIndex = 1;

// 前后切换幻灯片
function plusSlides(n) {
  currentSlide(slideIndex += n);
}

// 切换到指定幻灯片
function currentSlide(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let demos = document.getElementsByClassName("demo");
  // 边界处理，避免索引超出范围
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  // 隐藏所有幻灯片
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  // 移除所有缩略图的active状态
  for (i = 0; i < demos.length; i++) {
    demos[i].classList.remove("active");
  }
  // 显示当前选中的幻灯片
  slides[slideIndex-1].style.display = "block";
  // 给当前缩略图加active状态
  demos[slideIndex-1].classList.add("active");
  // 核心：自动滚动当前缩略图到可视区域
  demos[slideIndex-1].scrollIntoView({
    block: "nearest", // 垂直方向保持原有位置，不滚动
    inline: "center", // 水平方向滚动到容器中间
    behavior: "smooth" // 平滑滚动效果
  });
}

// 你原有的开关模态框逻辑
function openModal() {
  document.getElementById("myModal").style.display = "block";
  // 打开模态框时默认滚动到当前选中的缩略图
  currentSlide(slideIndex);
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

方案说明 #

• 不需要修改你现有的HTML结构，直接替换CSS和新增JS逻辑即可生效
• 缩略图超出容器宽度时会自动隐藏超出部分，切换幻灯片时会平滑滚动到对应缩略图，始终保持当前选中的缩略图在容器可视区域中间
• 支持PC和移动端，触摸可以手动滑动缩略条，切换箭头或者点击缩略图都会触发自动滚动

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